CSS : Animation
These are examples of CSS animation using @keyframe and transform.
img {
/* shortcut */
animation: ship 5s infinite linear;
/* all options */
animation-name: ship;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
@keyframes ship{
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
Spin
See the Pen Spinning Cards (css keyframes) by ninjajalapeno (@ninjajalapeno) on CodePen.
Rotate X
See the Pen Rotate X by ninjajalapeno (@ninjajalapeno) on CodePen.
Translate
See the Pen Translate by ninjajalapeno (@ninjajalapeno) on CodePen.
Skew
See the Pen Skew by ninjajalapeno (@ninjajalapeno) on CodePen.
Scale
See the Pen Scale by ninjajalapeno (@ninjajalapeno) on CodePen.
Reference
https://easings.net/ https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/