Detailed explanation of transformation and animation in CSS3

Recently I was learning to make mobile pages and made a small demo of the WeChat page, which used a lot of CSS3new content, including the new deformations and animations of CSS3 . In fact, this CSS3 animation effect can also be achieved with JS, but CSS3 can turn on hardware acceleration and have better performance.

(The browser prefix is ​​not written below, please add it yourself if necessary~~)

The realization of common animation effects in CSS3 actually mainly relies on transition and animation. Usually, these two are used in conjunction with the new attribute transform in CSS3.

So what are these three things actually used for? I draw a simple conclusion based on my own understanding.

transform: Transform the element;

transition: When the attribute of the element changes, give it a transition animation effect;

animation: Do complex animation.

Let’s talk about it in detail below.

The first thing to talk about is the syntax of transform:

transform:none | transform-functions ;

none is its default value, and the following transform-functions refers to the transformation function;

There are two types of transformation functions: 2D and 3D; // Related syntax can be found at http://www.w3school.com.cn/cssref/pr_transform.asp

Among them, 2D includes: (the deformation is based on the center of the element, that is, 50% of the X axis and Y axis)

　translate() //Including translateX() and translateY(); Function : Move the element according to the XOY coordinates (the right side of the

#rotate() // Function: rotate the element;

skew() // Including skewX() and skewY(); Function: tilt the element.

And 3D has more Z-axis. The relevant syntax can be found at

W3C

. Here we recommend an article written by Zhang Xinxu (http://www.zhangxinxu.com/ w

ordpress/2012/09/css3-3d-transform-perspective-animate-transition/), the explanation of transformation is easy to understand. The syntax mentioned in the article can be used with the following simulator for better results~ (http://fangyexu.com/tool-CSS3Inspector.html) Let me summarize a few points: 1 . When performing 3D deformation, the deformed element must first be wrapped with two layers of labels, one as a stage and one as a container.

舞台
    容器
        元素
        元素
        ...

//My personal understanding is that if the elements on the stage are treated as a whole, you can add only one layer of labels, that is, treat the stage as a container

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

2. On the CSS of the stage, set perspective (sight distance), which means the assumed distance of people from the stage. Set transform-style: preserve-3d on the CSS of the container to enable 3D

view

so that the child elements of the container are rendered in 3D space. //If the stage is used as a container, perspective and transform-style are written together.

So, can the base point of deformation only be the center of the element? no. The transform-origin attribute can change the base point of the transformation.

---

The keywords of transform-origin are generally

top

/

bottom / left / right / center / top left / top right etc. Yes, everyone is familiar with it. Some of the individual keywords are actually abbreviations, such as top = top center = center top; Then there is the transition animation transition.

---

The trigger condition is

:hover

/

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

The above is the detailed content of Detailed explanation of transformation and animation in CSS3. For more information, please follow other related articles on the PHP Chinese website!