Présenter les différences entre la transition CSS3 et l'animation

Transition CSS3

En CSS3, lorsque l'on peut ajouter un certain effet d'un style à un autre, il n'est pas nécessaire d'utiliser FlashAnimation ou JavaScript . Déplacez la souris sur l'élément suivant :

En d'autres termes, après avoir défini la transition de l'élément, si nous modifions soudainement l'attribut de l'élément , la transition se fera lentement,

Incluez la méthode suivante, lorsque la largeur de l'élément est soudainement modifiée, elle prendra la valeur que vous avez modifiée après 2 secondes

div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

Animation CSS3

CSS3, nous pouvons créer animation, il peut remplacer de nombreuses images animées de pages Web, animations Flash et JAVAScripts.

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
  
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

L'animation est un processus d'animation prédéfini, et CSS3 l'exécutera selon ce processus.

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!