animation shorthand css
animation: name time func delay iteration dir fill play; animation: none 0s ease 0s 1 normal none running;
Css animations
Here a codePen with cool animations: https://codepen.io/DevLorenzo/pen/ExgpvJM
animation css
animation: name duration timing-function delay iteration-count direction fill-mode play-state; /* name: name of the animation duration: amount of time it takes to complete ex: 2s timing-function: Specifies the speed curve of the animation ex: linear, ease, etc. delay:Specifies a delay before the animation will start iteration-count: how many times to play the animation, ex: initial direction: Specifies whether or not the animation should play in reverse on alternate cycles ex:forwards, backwards, alternate, alternate-reverse fill-mode: Specifies what values are applied by the animation outside the time it is executing ex: none, forwards, backwards, both animation-play-state: Specifies whether the animation is running or paused */
animation properties css
body{ background-color: purple; } @keyframes party{ 0% {background-color: red;} 10% {background-color: orange;} 20% {background-color: yellow;} 30% {background-color: green;} 40% {background-color: blue;} 50% {background-color: purple;} } @-webkit-keyframes party{ 0% {background-color: red;} 10% {background-color: orange;} 20% {background-color: yellow;} 30% {background-color: green;} 40% {background-color: blue;} 50% {background-color: purple;} }
Source: stackoverflow.com
animation properties css
function party(){ document.body.style.animation = 'party 2.5s infinite linear'; }
Source: stackoverflow.com
animation properties css
<html> <body id="bd"> <button onclick="party()">Press Me!</button> </body> </html>
Source: stackoverflow.com