p {
animation-duration: 25s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
to {
margin-left: 0%;
width: 100%;
}
}@keyframes animation-name {
0% {
/* CSS properties */
}
100% {
/* CSS properties */
}
}@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}@keyframes mymove {
0% {top: 0px;}
50% {top: 50px;}
75% {top: 40px;}
100%{top: 0px;}
}/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;// 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);