Explication détaillée de la transformation et de l'animation en CSS3

Récemment, j'apprenais à créer des pages mobiles et j'ai fait une petite démo de la page WeChat, qui utilisait beaucoup de nouveaux contenus CSS3, y compris de nouvelles déformations CSS3 et animations . En fait, cet effet d'animation CSS3 peut également être obtenu avec JS, mais CSS3 peut permettre l'accélération matérielle et les performances sont meilleures.

(Le préfixe du navigateur n'est pas écrit ci-dessous, veuillez l'ajouter vous-même si nécessaire ~~)

La réalisation des effets d'animation courants en CSS3 repose en fait principalement sur la transition et l'animation. Habituellement, ces deux éléments sont utilisés avec le nouvel attribut transform en CSS3

Alors, à quoi servent réellement ces trois choses ? Je tire une conclusion simple basée sur ma propre compréhension.

transformer : transformer l'élément ;

transition : lui donner un effet d'animation de transition lorsque les attributs de l'élément changent ;

animation : faire une animation complexe.

Parlons-en en détail ci-dessous.

La première chose à dire est la syntaxe de la transformation :

transform:none | transform-functions ;

aucune est sa valeur par défaut, et les fonctions de transformation suivantes font référence à la fonction de transformation ;

Il existe deux types de fonctions de transformation : 2D et 3D ; // La syntaxe pertinente peut être trouvée sur http://www.w3school.com.cn/cssref/pr_transform.asp requête

Celles 2D incluent : (la déformation est basée sur le centre de l'élément, soit 50% de l'axe X et de l'axe Y)

　translate() //Inclut traduireX() et traduireY() ; Fonction : Déplacer l'élément en fonction des coordonnées XOY (le côté droit de

　rotate() 　　 // Fonction : Faire pivoter l'élément ;

　skew() 　　 // Incluant skewX() et skewY(); Fonction : Incline l'élément.

Et la 3D a plus d'axe Z. La syntaxe pertinente peut être trouvée sur

W3C

Nous recommandons ici un article écrit par Zhang Xinxu (http://www.zhangxinxu.com/w). ordpress/2012/09/css3-3d-transform-perspective-animate-transition/), l'explication de la transformation est facile à comprendre. La syntaxe mentionnée dans l'article peut être utilisée avec le simulateur suivant pour de meilleurs résultats~ (http://fangyexu.com/tool-CSS3Inspector.html) Laissez-moi résumer quelques points : 1 Lors de l'exécution d'une déformation 3D , l'élément déformé doit d'abord être enveloppé de deux couches d'étiquettes, une comme scène et une comme conteneur.

//Ma compréhension personnelle est que si les éléments de la scène sont traités dans leur ensemble, vous ne pouvez ajouter qu'une seule couche d'étiquettes, c'est-à-dire traiter la scène comme un conteneur

舞台
    容器
        元素
        元素
        ...

2. Sur le CSS de la scène, définissez la perspective (distance de vue), ce qui signifie assumer la distance entre la personne et la scène. Définissez transform-style:preserve-3d sur le CSS du conteneur pour activer la

舞台(容器)
    元素
    元素
    ...

vue 3D

afin que les éléments enfants du conteneur soient rendus dans l'espace 3D. //Si la scène est utilisée comme conteneur, la perspective et le style de transformation sont écrits ensemble.

Alors, le point de base de la déformation peut-il être uniquement le centre de l'élément ? Non. L'attribut transform-origin peut modifier le point de base de la transformation.

---

Les mots-clés de transform-origin sont généralement

haut

/ bas / gauche / droite / centre / haut gauche / haut droit etc. Oui , tout le monde le connaît. Certains mots-clés individuels sont en fait des abréviations, comme top = top center = center top

Ensuite, il y a la transition d'animation de transition;

---

La condition de déclenchement est

:hover

/ :focus / :active / :checked / événement en JS

语法： transition: 指定过渡的CSS属性 、 过渡所需时间 、 过渡的函数（动画的速度控制） 、 开始的延迟时间

指定过渡的CSS属性：all / 指定样式 / none （若省略不写，则为 all ，none一般用于清空动画）

过渡所需时间：单位s / ms （默认为0）

过渡的函数： ease（由快到慢 默认值） / linear（匀速） / ease-in（加速） / ease-out（减速） / ease-in-out（先加速后减速）/ cubic-bezier（三次贝塞尔曲线）

延迟时间：单位s / ms （默认为0）

（写transition的时候，先写 动画时间 ， 再写延迟时间）

---

举个例子吧，博雅今年秋招的笔试题：

　　用 CSS3 实现一个半径25px的圆 进行速度由快到慢的300px滚动。

p{ width:50px; height:50px; border-radius:25px; background:#000; transition:1s ease-out;}
p:active{ transform:translateX(300px) rotate(780deg);}

贼简单吧~ 这里有几个细节，第一个就是 transition 是放在元素上，而不是 active 上，如果放在active上，就没有回去的动作了，大家可以试一下。

　　　　　　　　　　　　　　　　第二个就是，transform多个属性的时候，中间用空格来隔开，如果用逗号的话就没反应了。

但如果我在 :active 上加上 transition，

p{ width:50px; height:50px; border-radius:25px; background:#000; transition:1s ease-out;}
p:active{ transform:translateX(300px) rotate(780deg);transition:2s ease-in;}

这样按住的时候，就会执行 active 里面的transition，也就是去的时候用时 2s ，加速运动；而回来的时候执行 p 里的transition ，用时1s 减速运动。

---

最后就到 animation 了~ animation也是做动画的，不过功能比 transition 更加强大，因为animation可以控制动画的每一步，而transition只能控制开头和结尾。

语法 animation: 关键帧动画名字 、 动画时间 、 动画播放方式（函数） 、 延迟时间 、 循环次数 、 播放方向 、 播放状态 、 动画时间外的属性 ；

关键帧动画名字：就是你要执行的动画的名字，这里要先知道关键帧的语法

@keyframes name{
     0%{
       ...       
    }   
    50%{
       ...
    }
    100%{
       ...
    }  
}

这里的关键帧的名字就是name ，然后百分比的就是动画的进度，可以根据需要设置不同的百分比，再设置不同的动画。

动画时间：和transition一样~

动画播放方式（函数）：和transition的过渡的函数一样~

延迟时间：和transition一样~

循环次数：动画播放的次数，默认为1，通常为整数，如果为 infinite，则无限次地播放；

播放方向：默认为normal，就是正常地向前播放，还有一个值是 alternate ，就是先正向播放，再反向播放，不断地交替；

播放状态：running(默认) 、 paused // 像播音乐一样可以通过动作来暂停动画;

动画时间外的属性: none(默认) 、 forwards 、 backwards 、both；

　　举个例子吧：

@keyframes color{
    0%{ background:yellow}
    100%{ background:blue}
}
p{ background:black}

　　none：　　　　动画开始前：黑  ； 动画结束后：黑

　　forwards：　　动画开始前：黑 ； 动画结束后：蓝

　　backwards：　动画开始之前：黄 ； 动画结束后：黑

　　both：　　　　动画开始前：黄 ； 动画结束后：蓝

就是这么简单~

---

最后，说一下这三个属性在JS中的写法：

transform：

obj.style.transform = "translateX(100px) scale(2)";
obj.style.webkitTransform = "translateX(100px) scale(2)";//带浏览器前缀

transition：

obj.style.transition = "1s";
obj.style.webKitTransition = "1s";//带浏览器前缀

animation：

obj.style.animation = "name 1s ";//1、关键帧先在css写好；2、兼容写法在关键帧里面写；

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!