.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh
}
.pulse {
width: 70px;
height: 70px;
background-color: red;
border-radius: 50%;
position: relative;
animation: animate 3s linear infinite
}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;}
}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';
}div {
animation: mymove 5s infinite;
}