Animate.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
Fierce Fish
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
.slide-right {
width: 100%;
overflow: hidden;
margin-left: 400px;
max-width: 500px
}
.slide-right h2 {
animation: 2s slide-right;
animation-delay: 2s;
}
@keyframes slide-right {
from {
margin-left: -500px;
}
to {
margin-left: 0%;
}
}// Web Animation API Keyframes options
var options = {
iterations: Infinity,
iterationStart: 0,
delay: 0,
endDelay: 0,
direction: 'alternate',
duration: 700,
fill: 'forwards',
easing: 'ease-out',
}
element.animate(keyframes, options);The generation of repeated renderings of a scene quickly enough, with smoothly changing viewpoint or object positions, that the illusion of motion is achieved. OpenGL animation almost always uses double-buffering.