Develop Reference

on scroll animation animated but then fades out on safari, what am I doing wrong?

The code works but for some reason in Safari after its animated it fades slightly and I'm going crazy not being able to figure it out. I would like for the animation to stay on full opacity after it has animated in on scroll, but for some reason Safari makes it fade slightly after the animation. Can anyone help please?
Html:
<div class="js-scroll slide-left column content-column-title scrolled"><h1>Welcome</h1></div>
The Css and Keyframes:
.titleOpacity {
opacity: 0.333333;
top: 47%!important;
-webkit-transition: all .4s linear;
-o-transition: all .4s linear;
transition: all .4s linear;
-webkit-filter: blur(2px);
filter: blur(2px);
}
.js-scroll {
opacity: 0;
-webkit-transition: opacity 250ms;
-o-transition: opacity 250ms;
transition: opacity 250ms;
}
.js-scroll.scrolled {
opacity: 1;
}
.scrolled.fade-in {
-webkit-animation: fade-in 1s ease-in-out both;
animation: fade-in 1s ease-in-out both;
}
.scrolled.fade-in-bottom {
-webkit-animation: fade-in-bottom 1s ease-in-out both;
animation: fade-in-bottom 1s ease-in-out both;
}
.scrolled.fade-in-bottom-delay {
-webkit-animation: fade-in-bottom-delay 1s ease-in-out both;
animation: fade-in-bottom-delay 1s ease-in-out both;
}
.scrolled.slide-left {
-webkit-animation: slide-in-left 1s ease-in-out both;
animation: slide-in-left 1s ease-in-out both;
}
.scrolled.slide-right {
-webkit-animation: slide-in-right 1s ease-in-out both;
animation: slide-in-right 1s ease-in-out both;
}
#-webkit-keyframes slide-in-left {
from {
-webkit-transform: translateX(-5s0px);
transform: translateX(-50px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes slide-in-left {
from {
-webkit-transform: translateX(-5s0px);
transform: translateX(-50px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#-webkit-keyframes slide-in-right {
from {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes slide-in-right {
from {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#-webkit-keyframes fade-in-bottom {
from {
-webkit-transform: translateY(40px);
transform: translateY(40px);
opacity: 0;
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes fade-in-bottom {
from {
-webkit-transform: translateY(40px);
transform: translateY(40px);
opacity: 0;
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes fade-in-bottom-delay {
from {
-webkit-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes fade-in-bottom-delay {
from {
-webkit-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The Js code:
const scrollElements = document.querySelectorAll(".js-scroll");
const elementInView = (el, dividend = 1) => {
const elementTop = el.getBoundingClientRect().top;
return (elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend);
};
const elementOutofView = (el) => {
const elementTop = el.getBoundingClientRect().top;
return (elementTop > (window.innerHeight || document.documentElement.clientHeight));
};
const displayScrollElement = (element) => {
element.classList.add("scrolled");
};
const hideScrollElement = (element) => {
element.classList.remove("scrolled");
};
const handleScrollAnimation = () => {
scrollElements.forEach((el) => {
if (elementInView(el, 1.25)) {
displayScrollElement(el);
} else if (elementOutofView(el)) {
hideScrollElement(el)}
})
}
window.addEventListener("scroll", () => {
handleScrollAnimation();
});

How to create spinning animation in CSS? [duplicate]

I want to make a rotation of my loading icon by CSS.
I have an icon and the following code:
<style>
#test {
width: 32px;
height: 32px;
background: url('refresh.png');
}
.rotating {
-webkit-transform: rotate(360deg);
-webkit-transition-duration: 1s;
-webkit-transition-delay: now;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
</style>
<div id='test' class='rotating'></div>
But it doesn't work. How can the icon be rotated using CSS?

#-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
<div
class="rotating"
style="width: 100px; height: 100px; line-height: 100px; text-align: center;"
>Rotate</div>

Working nice:
#test {
width: 11px;
height: 14px;
background: url('data:image/gif;base64,R0lGOD lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7');
}
#-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
}
<div id='test' class='rotating'></div>

Infinite rotation animation in CSS
/* ENDLESS ROTATE */
.rotate{
animation: rotate 1.5s linear infinite;
}
#keyframes rotate{
to{ transform: rotate(360deg); }
}
/* SPINNER JUST FOR DEMO */
.spinner{
display:inline-block; width: 50px; height: 50px;
border-radius: 50%;
box-shadow: inset -2px 0 0 2px #0bf;
}
<span class="spinner rotate"></span>
MDN - Web CSS Animation

Without any prefixes, e.g. at it's simplest:
.loading-spinner {
animation: rotate 1.5s linear infinite;
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}

Works in all modern browsers
.rotate{
animation: loading 3s linear infinite;
#keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
}

#keyframes rotate {
100% {
transform: rotate(1turn);
}
}
div{
animation: rotate 4s linear infinite;
}

Simply Try This. Works fine
#-webkit-keyframes loading {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes loading {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#loading {
width: 16px;
height: 16px;
-webkit-animation: loading 2s linear infinite;
-moz-animation: loading 2s linear infinite;
}
<div class="loading-test">
<svg id="loading" aria-hidden="true" focusable="false" role="presentation" class="icon icon-spinner" viewBox="0 0 20 20"><path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" fill="#919EAB"/></svg>
</div>

Rotation on add class .active
.myClassName.active {
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

<style>
div
{
height:200px;
width:200px;
-webkit-animation: spin 2s infinite linear;
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
</style>
</head>
<body>
<div><img src="1.png" height="200px" width="200px"/></div>
</body>

the easiest way to do it is using font awesome icons by adding the "fa-spin" class. for example:
<i class="fas fa-spinner fa-3x fa-spin"></i>
you can save some lines of code but of course you are limited to the icons from font awesome. I always use it for loading spinners
here you have the documentation from font awesome:
https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use

Make Coin Flip Animation Two Sided

I would like this animation taken from animate.css to show a coin with 2 different side and not the same one. I pasted the relevant parts of my code to this Fiddle:
jsFiddle Link
HTML Code:
<div id="coin-flip">
<button id="btnFlip">Flip the Coin</button></br></br></br>
<div id="coin-flip-cont">
<div id="coin"></div>
</div></br></br></br>
<h2 id="result"></h2>
</div>
Javascript, jQuery Code:
$(function() {
var coin = {
sideOne: "./img/image1.png",
sideTwo: "./img/image2.png"
}
$("#btnFlip").click(function() {
$("#coin").html(`<img class="animated flip"src="${coin[result]}" width="200" length="200"/>`);
});
});
CSS is from Animate.css, You can view it in the Fiddle.
Basically the result I want is the coin to flip showing both different sides and landing on the one that is set by the rest of my code.
EDIT: Just adding this as an example of what I would like to achieve http://codepen.io/html5andblog/pen/ea62c27ddb5c7b022ab1e889e2f1b8d2
I feel that this can be done in a much simpler way and with the css that I already have.

First of all, change this line of your HTML code :
<button id="btnFlip">Flip the Coin</button>
To :
<button id="btnFlip" onclick="coin_flip()">Flip the Coin</button>
And then change your javascript to this code :
function coin_flip{
var coin_1 = "/images/image_1.png"
var coin_2 = "/images/image_2.png"
// the 8 below is the number of flips in your animation
for (var i = 0 ; i<8 ; i++){
if (document.getElementById("coin").src == coin_1){
document.getElementById("coin").src == coin_2
}
if (document.getElementById("coin").src == coin_2){
document.getElementById("coin").src == coin_1
}
}
// below chooses a random side
var rand = Math.floor((Math.random() * 2) + 1);
document.getElementById("coin").src == "coin_" + rand
}
This javascript code flips the coin 8 times before choosing a random side to land on.

you can use animationend event to detect when the CSS animation ended.
Then you execute code to change the image source.
JQuery
$('#coin').on('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function(e) {
$("#coin").removeClass('animateCoin');
setTimeout(function() {
var srcImg = $($('#coin img')[0]).attr('src');
if (srcImg === coin.heads)
$($('#coin img')[0]).attr('src',coin.tails);
else
$($('#coin img')[0]).attr('src',coin.heads);
$("#coin").addClass('animateCoin');
},50);
});
CSS :
.animateCoin {
animation: flip 1s;
}

Here is the complete code you can flip coin 2 sided solution run snippet.
To watch correct result see in full page view otherwise you can see on codepen.
You can have link of codepen too click here
jQuery(document).ready(function($){
var spinArray = ['animation900','animation1080','animation1260','animation1440','animation1620','animation1800','animation1980','animation2160'];
function getSpin() {
var spin = spinArray[Math.floor(Math.random()*spinArray.length)];
return spin;
}
$('#flip').on('click', function(){
$('#coin').removeClass();
setTimeout(function(){
$('#coin').addClass(getSpin());
}, 100);
});
});
html, body {
margin: 0;
width: 100%;
height: 100%;
background-color: #333;
}
#coin-flip-cont {
width: 200px;
height: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
#coin {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
#coin .front, #coin .back {
position: absolute;
width: 200px;
height: 200px;
}
#coin .front {
transform: translateZ(1px);
border-radius: 50%;
background-color: #3498db;
border: solid 5px gray;
}
#coin .back {
transform: translateZ(-1px) rotateY(180deg);
border-radius: 50%;
background-color: #2ecc71;
border: solid 5px gray;
}
#coin.animation900 {
-webkit-animation: rotate900 3s linear forwards;
animation: rotate900 3s linear forwards;
}
#coin.animation1080 {
-webkit-animation: rotate1080 3s linear forwards;
animation: rotate1080 3s linear forwards;
}
#coin.animation1260 {
-webkit-animation: rotate1260 3s linear forwards;
animation: rotate1260 3s linear forwards;
}
#coin.animation1440 {
-webkit-animation: rotate1440 3s linear forwards;
animation: rotate1440 3s linear forwards;
}
#coin.animation1620 {
-webkit-animation: rotate1620 3s linear forwards;
animation: rotate1620 3s linear forwards;
}
#coin.animation1800 {
-webkit-animation: rotate1800 3s linear forwards;
animation: rotate1800 3s linear forwards;
}
#coin.animation1980 {
-webkit-animation: rotate1980 3s linear forwards;
animation: rotate1980 3s linear forwards;
}
#coin.animation2160 {
-webkit-animation: rotate2160 3s linear forwards;
animation: rotate2160 3s linear forwards;
}
#-webkit-keyframes rotate900 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
}
#keyframes rotate900 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
}
#-webkit-keyframes rotate1080 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
}
#keyframes rotate1080 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
}
#-webkit-keyframes rotate1260 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1260deg); -moz-transform: rotateY(1260deg); transform: rotateY(1260deg); }
}
#keyframes rotate1260 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1260deg); -moz-transform: rotateY(1260deg); transform: rotateY(1260deg); }
}
#-webkit-keyframes rotate1440 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1440deg); -moz-transform: rotateY(1440deg); transform: rotateY(1440deg); }
}
#keyframes rotate1440 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1440deg); -moz-transform: rotateY(1440deg); transform: rotateY(1440deg); }
}
#-webkit-keyframes rotate1620 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
}
#keyframes rotate1620 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
}
#-webkit-keyframes rotate1800 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
}
#keyframes rotate1800 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
}
#-webkit-keyframes rotate1980 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
}
#keyframes rotate1980 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
}
#-webkit-keyframes rotate2160 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(2160deg); -moz-transform: rotateY(2160deg); transform: rotateY(2160deg); }
}
#keyframes rotate2160 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(2160deg); -moz-transform: rotateY(2160deg); transform: rotateY(2160deg); }
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 125px;
position: inherit;
}
.front-text{
font-weight: 700 !important;
margin-top: 45%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
<div>
<div id="coin-flip-cont">
<div id="coin">
<div class="front"><p class="front-text">Head</p></div>
<div class="back"><p class="front-text">Tail</p></div>
</div>
</div>
<button type="button" id="flip" class="button"> Flip Coin</button>
</div>
</center>

Reverse animation on page transition

I have a few pages on my website and i made a header animation (pulldown). So, i need to reverse my animation (pullUp) when the other one page is clicked. Is there any option to do that ? Or is there any option to make the second animation (pullup) active when the other page is selleced
header{
background-color:black;
height:80px;
text-align:center;
animation-name: pullDown;
-webkit-animation-name: pullDown;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
}
.pullUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}
#keyframes pullUp {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.02);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(1);
}
}
#-webkit-keyframes pullUp {
0% {
-webkit-transform: scaleY(0.1);
}
40% {
-webkit-transform: scaleY(1.02);
}
60% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(1);
}
}

There are a few options I can recommend:
Use CSS's :active selector to bind to the hash of the "pulldown" item:
```
second-page:active ~ .drawer {
animation: "pullUp" 1s linear;
}
```
So that when the user clicks on the url to your second page (#second-page), the animation will trigger, thus hiding the drawer itself.
Use Javascript to toggle classes:
(jQuery)
var $drawer = $(".drawer");
var $drawerToggle = $(".drawer-toggle").on("click", function() {
$drawer.toggle("fast");
}
Use an input[type="checkbox"] 'hack':
.drawer-toggle:checked ~ .drawer {
animation: "pullDown" 1s linear;
}
.drawer-toggle ~ .drawer {
animation: "pullUp" 1s linear;
}

Here is my code http://codepen.io/anon/pen/zrXrXM but as i told, when i click on <a> element, page transition is instantly. Is there any possible way to stop transition for a few seccond ?

CSS How can I make a particle leave a trail that fades away?

I got the particle to move around which is what I wanted, but I want to add a little trail that will fade a way and I am not sure how to go about doing that
Is it possible to do with only css? or do I have to involve jquery in this?
Here is a demo: LINK
#object{
position: absolute;
bottom:-2em;
left:0;
right:0;
margin:0 auto;
width: 10px;
height: 10px;
background: red;
-webkit-animation: myOrbit 6s linear infinite;
-moz-animation: myOrbit 6s linear infinite;
-o-animation: myOrbit 6s linear infinite;
animation: myOrbit 6s linear infinite;
}
#-webkit-keyframes myOrbit {
0% { -webkit-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
25% { -webkit-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
50% { -webkit-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
75% { -webkit-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
100% { -webkit-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}
#-moz-keyframes myOrbit {
0% { -moz-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
25% { -moz-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
50% { -moz-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
75% { -moz-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
100% { -moz-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}
#-o-keyframes myOrbit {
0% { -o-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
25% { -o-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
50% { -o-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
75% { -o-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
100% { -o-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}
#keyframes myOrbit {
0% { transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
25% { transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
50% { transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
75% { transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
100% { transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }}

I was doing something similar which is how I found this question. I took what I came up with and adapted it to your answer. Not sure it will work for what you're doing but it's still fun.
http://jsfiddle.net/y40kwyhr/2/
var obj = document.getElementById("object");
class Particle {
constructor(parent) {
this.div = document.createElement("div");
this.div.classList.add("particle");
this.div.classList.add("twinkle");
this.div.id = "particle-" + Date.now();
parent.appendChild(this.div);
setTimeout(() => { // remove particle
if(this.driftIntervalId) clearInterval(this.driftIntervalId);
this.div.remove();
}, 400);
}
drift(speed = 1) {
var rad = Math.PI * Math.random();
this.driftIntervalId = setInterval(() => {
var left = +this.div.style.left.replace("px",'');
var top = +this.div.style.top.replace("px",'');
left += Math.sin(rad) * speed;
top += Math.cos(rad) * speed;
this.div.style.left = left + "px";
this.div.style.top = top + "px";
}, 10);
}
}
var particleFactory = function(meteor) {
var rect = meteor.getBoundingClientRect();
var particle = new Particle(meteor.parentElement);
particle.div.style.left = rect.left + "px";
particle.div.style.top = rect.top + "px";
particle.drift(0.4);
setTimeout(() => {
particleFactory(meteor);
}, 100);
};
particleFactory(obj);

Something like this?
Changed keyframe animation so it orbits correctly
Added new animation for the 'trail' to fadeout over time.
Is this what you meant?
#object{
position: absolute;
top: 200px;
left:0;
right:0;
margin:0 auto;
width: 10px;
height: 10px;
background: red;
-webkit-animation: myOrbit 6s linear infinite;
-moz-animation: myOrbit 6s linear infinite;
-o-animation: myOrbit 6s linear infinite;
animation: myOrbit 6s linear infinite;
}
#object:after{
content: "";
position: absolute;
top: 0;
left:0;
right:0;
margin: 0 auto;
width: 100px;
height: 10px;
opacity: .1;
background-color: red;
-webkit-animation: myOrbit-fadeout 6s linear infinite;
-moz-animation: myOrbit-fadeout 6s linear infinite;
-o-animation: myOrbit-fadeout 6s linear infinite;
animation: myOrbit-fadeout 6s linear infinite;
}
#-webkit-keyframes myOrbit {
0% { -webkit-transform: rotate(0deg) translateY(200px); }
25% { -webkit-transform: rotate(90deg) translateY(200px); }
50% { -webkit-transform: rotate(180deg) translateY(200px); }
75% { -webkit-transform: rotate(270deg) translateY(200px); }
100% { -webkit-transform: rotate(360deg) translateY(200px); }
}
#-moz-keyframes myOrbit {
0% { -moz-transform: rotate(0deg) translateY(200px); }
25% { -moz-transform: rotate(90deg) translateY(200px); }
50% { -moz-transform: rotate(180deg) translateY(200px); }
75% { -moz-transform: rotate(270deg) translateY(200px); }
100% { -moz-transform: rotate(360deg) translateY(200px); }
}
#-o-keyframes myOrbit {
0% { -o-transform: rotate(0deg) translateY(200px); }
25% { -o-transform: rotate(90deg) translateY(200px); }
50% { -o-transform: rotate(180deg) translateY(200px); }
75% { -o-transform: rotate(270deg) translateY(200px); }
100% { -o-transform: rotate(360deg) translateY(200px); }
}
#keyframes myOrbit {
0% { transform: rotate(0deg) translateY(200px); }
25% { transform: rotate(90deg) translateY(200px); }
50% { transform: rotate(180deg) translateY(200px); }
75% { transform: rotate(270deg) translateY(200px); }
100% { transform: rotate(360deg) translateY(200px); }
}
#-webkit-keyframes myOrbit-fadeout {
0% { opacity: 1.0; }
25% { opacity: .75; }
50% { opacity: .5; }
75% { opacity: .25; }
100% { opacity: 0; }
}
#-moz-keyframes myOrbit-fadeout {
0% { opacity: 1.0; }
25% { opacity: .75; }
50% { opacity: .5; }
75% { opacity: .25; }
100% { opacity: 0; }
}
#-o-keyframes myOrbit-fadeout {
0% { opacity: 1.0; }
25% { opacity: .75; }
50% { opacity: .5; }
75% { opacity: .25; }
100% { opacity: 0; }
}
#keyframes myOrbit-fadeout {
0% { opacity: 1.0; }
25% { opacity: .75; }
50% { opacity: .5; }
75% { opacity: .25; }
100% { opacity: 0; }
}