“Propriétés d'animation CSS” Réponses codées

cssure du raccourci d'animation

animation: name time func delay iteration dir fill play;
animation: none 0s ease 0s 1 normal none running;
Breakable Barracuda

Animations CSS

Here a codePen with cool animations:
https://codepen.io/DevLorenzo/pen/ExgpvJM
DevLorenzo

Propriétés d'animation 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;} 
}
Yucky Yak

Animations CSS

window.addEventListener('scroll', () => {
  document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);
Shy Salmon

Animation CSS

@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;
}
Troubled Trout

Propriétés d'animation CSS

function party(){
  document.body.style.animation = 'party 2.5s infinite linear';
}
Yucky Yak

Réponses similaires à “Propriétés d'animation CSS”

Questions similaires à “Propriétés d'animation CSS”

Plus de réponses similaires à “Propriétés d'animation CSS” dans CSS

Parcourir les réponses de code populaires par langue

Parcourir d'autres langages de code