Detaillierte Erläuterung der Transformation und Animation in CSS3

Kürzlich habe ich gelernt, mobile Seiten zu erstellen, und eine kleine Demo der WeChat-Seite erstellt, die viele CSS3-neu hinzugefügteInhalte verwendet, einschließlich der neuen CSS3-Verformungen und Animationen . Tatsächlich lässt sich dieser CSS3-Animationseffekt auch mit JS erzielen, allerdings kann CSS3 eine Hardwarebeschleunigung ermöglichen und die Leistung ist besser.

(Das Browser-Präfix wird unten nicht geschrieben, bitte fügen Sie es bei Bedarf selbst hinzu ~~)

Die Realisierung gängiger Animationseffekte in CSS3 basiert tatsächlich hauptsächlich auf Übergang und Animation. Normalerweise werden diese beiden zusammen mit dem neuen Attribut transform in CSS3

verwendet. Wofür werden diese drei Dinge eigentlich verwendet? Ich ziehe eine einfache Schlussfolgerung, die auf meinem eigenen Verständnis basiert.

transformieren: das Element transformieren;

Übergang: ihm einen Übergangsanimationseffekt verleihen, wenn sich die Attribute des Elements ändern;

Animation: komplexe Animation durchführen.

Lassen Sie uns weiter unten ausführlich darüber sprechen.

Das erste, worüber wir sprechen müssen, ist die Syntax der Transformation:

transform:none | transform-functions ;

none ist der Standardwert, und die folgenden Transformationsfunktionen beziehen sich auf die Transformationsfunktion ;

Es gibt zwei Arten von Transformationsfunktionen: 2D und 3D; // Relevante Syntax finden Sie unter http://www.w3school.com.cn/cssref/pr_transform.asp Abfrage

Zu den 2D-Abfragen gehören: (die Verformung basiert auf der Mitte des Elements, also 50 % der X- und Y-Achse)

　translate() //Enthält TranslateX() und TranslateY() ; Funktion: Verschieben Sie das Element entsprechend den XOY-Koordinaten (die rechte Seite von

　rotate() 　　 // Funktion: Drehen Sie das Element;

　skew() 　　 // Einschließlich skewX() und skewY(); Funktion: Kippen des Elements.

Und 3D hat mehr Z-Achse. Die entsprechende Syntax finden Sie unter

. Hier empfehlen wir einen Artikel von Zhang Xinxu (http://www.zhangxinxu.com/). ordpress/2012/09/css3-3d-transform-perspective-animate-transition/) ist die Erklärung der Transformation leicht zu verstehen. Die im Artikel erwähnte Syntax kann mit dem folgenden Simulator verwendet werden, um bessere Ergebnisse zu erzielen ~ (http://fangyexu.com/tool-CSS3Inspector.html) Lassen Sie mich einige Punkte zusammenfassen: 1 Bei der Verformung muss das verformte Element zunächst mit zwei Lagen Etiketten umwickelt werden, eine als Bühne und eine als Behälter.

舞台
    容器
        元素
        元素
        ...

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

zu aktivieren, sodass die untergeordneten Elemente des Containers im 3D-Raum gerendert werden. //Wenn die Bühne als Container verwendet wird, werden Perspektive und Transformationsstil zusammen geschrieben.

Die Schlüsselwörter von transform-origin sind im Allgemeinen

/ unten / links / rechts / Mitte / oben links / oben rechts usw. Ja , jeder kennt es. Einige der einzelnen Schlüsselwörter sind eigentlich Abkürzungen, wie zum Beispiel oben = oben Mitte = Mitte oben

Die Auslösebedingung ist

/ :focus / :active / :checked / Ereignis in 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、兼容写法在关键帧里面写；

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Transformation und Animation in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!