Introduction à la fonction Transitions de la fonction d'animation CSS3

En CSS3, si vous utilisez la fonction d'animation, vous pouvez animer le texte ou les images de la page et faire passer la couleur d'arrière-plan en douceur d'une couleur à l'autre.

La fonction d'animation en CSS3 est divisée en fonction de transition et en fonction d'animations. Les deux fonctions peuvent produire des effets d'animation en modifiant les valeurs d'attribut​​en CSS.
Jusqu'à présent, la fonction Transitions prend en charge une transition fluide d'une valeur d'attribut à une autre, et la fonction Animations prend en charge la spécification d'images clés pour produire des effets d'animation plus complexes sur la page.

Fonction Transitions

浏览器	Firefox 4+	Opera 10	Safari 3.1+	Chrome 8+
各浏览器写法	-moz-transition	-o-transition	-webkit-transition	-webkit-transition

transition:property duration timing-function;property表示对哪个属性进行平滑过渡；
duration表示在多长时间内完成属性的平滑过渡；
timing-function表示通过什么方法来进行平滑过渡；

html :

<p>示例文字</p>

Css qui effectue une transition en douceur d'une valeur d'attribut :

Démonstration en ligne (survol de la souris , changements de couleur d'arrière-plan)

<style>
      p {        background-color: pink;        -webkit-transition: background-color 1s linear;        -moz-transition: background-color 1s linear;        -o-transition: background-color 1s linear;      }
      p:hover {        background-color: blue;  /*鼠标经过背景颜色改变*/    
      }</style>

Css pour une transition en douceur de plusieurs valeurs d'attribut :

Démonstration en ligne (passes de souris, couleur d'arrière-plan, couleur de police, changements de largeur)

<style>
      p {        background-color: pink;        -webkit-transition: background-color 1s linear,color 1s linear,width 1s linear;        -moz-transition: background-color 1s linear,color 1s linear,width 1s linear;        -o-transition: background-color 1s linear,color 1s linear,width 1s linear;      }
      p:hover {        background-color: blue; /*鼠标经过背景颜色改变*/   
        color: #fff;  /*鼠标经过字体颜色改变*/   
        width: 400px;  /*鼠标经过宽度改变*/   
      }</style>

Démonstration en ligne (utilisation combinée de la fonction d'animation des transitions) :

Passez la souris sur l'image, déplacez d'abord de 30 pixels vers la droite, puis faites pivoter de 180 degrés

html :

<p><img src="images/03.jpg" alt="*"></p>

css :

  img {      
  position: absolute;      top: 70px;      left: 0;      -webkit-transform: rotate(0deg);      -webkit-transitions: left 1s linear, -webkit-transform 1s linear;      -moz-transform: rotate(0deg);      -moz-transitions: left 1s linear, -moz-transform 1s linear;      -o-transform: rotate(0deg);      -o-transitions: left 1s linear, -o-transform 1s linear;    }
    p:hover img{      position: absolute;      left: 30px;      -webkit-transform: rotate(180deg);      -moz-transform: rotate(180deg);      -o-transform: rotate(180deg);    }

Analyse :

L'inconvénient d'utiliser la fonction Transitions pour implémenter l'animation est que vous ne pouvez spécifier que la valeur de début et la valeur de fin de l'attribut, puis obtenir une transition en douceur entre ces deux attributs, qui ne peut pas être obtenue. Effets d'animation plus complexes
Mais utilisez la fonction Animation pour obtenir des effets d'animation, qui permettent de produire des effets d'animation complexes sur la page en spécifiant des images clés.

En CSS3, si vous utilisez la fonction d'animation, vous pouvez animer le texte ou les images sur la page et faire passer la couleur d'arrière-plan en douceur d'une couleur à l'autre.

La fonction d'animation en CSS3 est divisée en fonction de transition et en fonction d'animations. Les deux fonctions peuvent produire des effets d'animation en modifiant les valeurs d'attribut en CSS.
Jusqu'à présent, la fonction Transitions prend en charge une transition fluide d'une valeur d'attribut à une autre, et la fonction Animations prend en charge la spécification d'images clés pour produire des effets d'animation plus complexes sur la page.

Fonction Transitions

浏览器	Firefox 4+	Opera 10	Safari 3.1+	Chrome 8+
各浏览器写法	-moz-transition	-o-transition	-webkit-transition	-webkit-transition

transition:property duration timing-function;property表示对哪个属性进行平滑过渡；
duration表示在多长时间内完成属性的平滑过渡；
timing-function表示通过什么方法来进行平滑过渡；

html :

<p>示例文字</p>

Css qui effectue une transition en douceur d'une valeur d'attribut :

Démonstration en ligne (survol de la souris , changements de couleur d'arrière-plan)

<style>
      p {        background-color: pink;        -webkit-transition: background-color 1s linear;        -moz-transition: background-color 1s linear;        -o-transition: background-color 1s linear;      }
      p:hover {        background-color: blue;  /*鼠标经过背景颜色改变*/    
      }</style>

CSS pour une transition en douceur de plusieurs valeurs d'attribut :

Démonstration en ligne (passes de souris, couleur d'arrière-plan, couleur de police, changements de largeur)

<style>
      p {        background-color: pink;        -webkit-transition: background-color 1s linear,color 1s linear,width 1s linear;        -moz-transition: background-color 1s linear,color 1s linear,width 1s linear;        -o-transition: background-color 1s linear,color 1s linear,width 1s linear;      }
      p:hover {        background-color: blue; /*鼠标经过背景颜色改变*/   
        color: #fff;  /*鼠标经过字体颜色改变*/   
        width: 400px;  /*鼠标经过宽度改变*/   
      }</style>

Démonstration en ligne (utilisation complète de la fonction d'animation des transitions) :

Passez la souris sur l'image, déplacez-la d'abord de 30 px vers la droite, puis faites-la pivoter de 180 degrés

html :

css :

<p><img src="images/03.jpg" alt="*"></p>

Analyse :

  img {      position: absolute;      top: 70px;      left: 0;      -webkit-transform: rotate(0deg);      -webkit-transitions: left 1s linear, -webkit-transform 1s linear;      -moz-transform: rotate(0deg);      -moz-transitions: left 1s linear, -moz-transform 1s linear;      -o-transform: rotate(0deg);      -o-transitions: left 1s linear, -o-transform 1s linear;    }
    p:hover img{      position: absolute;      left: 30px;      -webkit-transform: rotate(180deg);      -moz-transform: rotate(180deg);      -o-transform: rotate(180deg);    }

L'inconvénient d'utiliser la fonction Transitions pour implémenter l'animation est que vous ne pouvez spécifier que la valeur de début et la valeur de fin de l'attribut, puis obtenir une transition en douceur entre ces deux attributs, qui ne peut pas être obtenue. Effets d'animation plus complexes

Mais utilisez la fonction Animation pour obtenir des effets d'animation, qui permettent de produire des effets d'animation complexes sur la page en spécifiant des images clés.

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!