Animasi CSS SHORTHAND
animation: name time func delay iteration dir fill play;
animation: none 0s ease 0s 1 normal none running;
Breakable Barracuda
animation: name time func delay iteration dir fill play;
animation: none 0s ease 0s 1 normal none running;Here a codePen with cool animations:
https://codepen.io/DevLorenzo/pen/ExgpvJMbody{
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;}
}window.addEventListener('scroll', () => {
document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);@keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
#animate-area {
width: 200px;
height: 200px;
background-image: url(http://placekitten.com/400/200);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 10s linear infinite alternate;
}function party(){
document.body.style.animation = 'party 2.5s infinite linear';
}