Quelles propriétés possède l’animation CSS3 ?

Les attributs d'animation CSS3 incluent : "@keyframes", animation, nom d'animation, durée d'animation, délai d'animation, direction d'animation, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Attributs d'animation CSS3 :

• @keyframes spécifie l'animation.

• animation Propriété raccourcie pour toutes les propriétés d'animation, à l'exception de la propriété animation-play-state.

• animation-name spécifie le nom de l'animation @keyframes.

• animation-duration spécifie les secondes ou millisecondes nécessaires à l'animation pour terminer un cycle. La valeur par défaut est 0.

• animation-timing-function spécifie la courbe de vitesse de l'animation. La valeur par défaut est « facilité ».

• animation-delay spécifie quand l'animation démarre. La valeur par défaut est 0.

• animation-iteration-count spécifie le nombre de fois que l'animation est jouée. La valeur par défaut est 1.

• animation-direction précise si l'animation est jouée à l'envers lors du cycle suivant. La valeur par défaut est "normale".

• animation-play-state précise si l'animation est en cours d'exécution ou en pause. La valeur par défaut est "en cours d'exécution".

• animation-fill-mode spécifie l'état en dehors du temps d'animation de l'objet.

Exemple : Utilisez les attributs d'animation CSS3 pour créer des animations simples

body {
  background-color: #fff;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
  margin: 50px auto;
  min-width: 320px;
  max-width: 500px;
}

.element {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #0099cc;
  border-radius: 50%;
  position: relative;
  top: 0;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

@keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

Effet de course

(Partage de vidéos d'apprentissage :

tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!