CSS3 Animations

CSS3 Animations

by Dhruvang Gajjar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="rocket-animation" data-time="2"><i class="fa fa-rocket fa-5x" aria-hidden="true"></i></div>
<div class="rocket-animation-2"><i class="fa fa-rocket fa-5x" aria-hidden="true"></i></div>

CSS

@keyframes rocket {
    0%   {left:0%; top:0;}
    100% {left:100%; top:0;}
}
@keyframes rocket-to-bottom-right {
    0%   {left:0%; top:0;}
    100% {left:100%; top:500px;}
}

.rocket-animation {
    position: relative;
    animation-name: rocket;
    animation-duration: attr(data-time s);
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.rocket-animation-2 {
    position: relative;
    animation-name: rocket-to-bottom-right;
    animation-duration: 10s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}