CSS3 provides a wealth of animation class attributes, so that we can not even by flash JavaScript, you can achieve a lot of dynamic effects. They are mainly divided into three categories: transform (conversion), transition (transition), animation (animation). Which transform divided into 2D and 3D transformations transformation, it gives us the ability to not make the plane or three-dimensional graphics through professional design software.
A transition
Set its transition effect by setting the attribute to a transition element. The actual definition of the transition element becomes another state from one state process, such as the width becomes 300px by 100px, the background color from red into orange and the like.
. 1 div {
2 width : 200px ;
. 3 height : 200px ;
. 4 background-Color : Red ;
. 5 Transition-Property : width, background-Color ;
. 6 / * This attribute specifies attributes required conversion element, different properties are separated by commas * /
. 7 Transition-DURATION : lS ;
. 8 / * this attribute specifies the time for the entire process takes spaced to set the time for each individual attribute changes with commas * /
. 9 Transition-Timing-function : EASE ;
10 / *This property set change speed curve, i.e. the default value is EASE, showing slow - fast - slow, there are several other values: linear, uniform; ease-in, slow - fast, ease-out, fast - slow, ease-in-out, slow - fast - slow, visually similar effect and ease * /
. 11 Transition-delay : lS ;
12 is / * delay time * /
13 }
After the properties of the elements set up, it requires some action triggers a change in the specified property to see the results, will be like: hover, or JS events.
Further, transition is actually a complex attribute, a plurality of attributes can be abbreviated transition:
. 1 div {
2 width : 200px ;
. 3 height : 200px ;
. 4 Transition : width 2S lS, 2S background-Color ;
. 5 / * Transition Property and-transition-duration is necessary, the other two are optional * /
6 }
. 7 div: hover {
. 8 width : 400px
. 9 }
When there are multiple attributes need to set up the transition, and continuing events, velocity curve, the delay time being equal, you can be abbreviated as follows:
. 1 div {
2 / * some code * /
. 3 Transform : All 2S ;
. 4 / * all attributes are set to change transition effects * /
5 }
Two animation
In fact, animations and transitions, are used to set the dynamic effects of the elements, the difference is that the transition need to artificially trigger in order to be implemented, and there will be no human explanation animation is triggered.
Prior to animate elements, we should first create an animation, that is what the state is beginning to end is what kind of state.
. 1 @keyframes Sport { / * is the name of the animation Sport can customize * /
2 from {
. 3 width : 200px ;
. 4 }
. 5 to {
. 6 width : 400px ;
. 7 }
. 8 / * In addition to the way to use from ... to you can also use a percentage to create richer animation process, 0% indicates the beginning, 100% means the end of the * /
9 }
After creating the animation, you can set that elements such as animation long duration, velocity curve, attributes such as the number of repetitions.
1 div{
2 animation-name:sport;
3 /*规定元素需要执行的动画名称，即使用@keyframs创建的那个*/
4 animation-duration:5s;
5 /*规定动画完成一个周期所花费的秒或毫秒*/
6 animation-timing-function:ease;
7 /*规定动画的速度曲线,可选值同过渡*/
8 animation-delay:3s;
9 /*规定动画延迟时间*/
10 animation-iteration-count:5;
11 /*规定动画被播放的次数，infinite表示一直循环播放*/
12 animation-direction:alternate;
13 /*规定动画是否在下一周期逆向地播放，normal是默认取值，表示不逆向播放，逆向播放一次也会在animation-iteration-count属性值中减1*/
14 animation-play-state:paused;
15 /*规定动画是否正在运行或暂停，默认值是running，表示正在运行*/
16 animation-fill-mode:forwards;
17 /*规定动画结束后元素的状态，forwards，保持动画停止时的状态，backwards，回到开始时的状态，none，保持默认。一般没有指定该属性时，动画结束后会回到开始时的状态。不同浏览器可能有不同表现*/
18 }
三 2D变换
通过给元素设置transform属性，可以对元素进行2D变换。很多地方把transform翻译成转换，该单词在英语中的含义是使改变，使变形。我更倾向于把它翻译成变换，通过CSS变换，我们可以对元素进行移动、缩放、转动、拉伸等操作。
1，translate(x，y)
1 div{
2 transform:translate(50px,100px);
3 }
4 /*div在水平方向移动50px，垂直方向移动100px*/
translate方法接收两个参数，分别表示在水平和垂直正方向上的偏移量，可以接收负值，表示向反方向偏移。
2，rotate(deg)
1 div{
2 transform:rotate(30deg);
3 }
4 /*顺时针方向旋转元素30度*/
rotate方法接收一个参数，表示元素旋转的角度，可以接收负值，表示逆时针方向旋转。rotate方法实际是通过修改元素的坐标系来达到旋转元素的目的，比如：
1 div{
2 transform:rotate(45deg) translate(50px,0);
3 /*多属性复合形式写法*/
4 }
5 /*元素先旋转45度，然后向浏览器x轴正方向偏下45度的方向移动50px*/
默认情况下，元素都是以自己的中心点为圆心旋转，我们可以通过transform-origin属性修改该参考点。
1 div{
2 width:200px;
3 height:200px;
4 transform:rotate(30deg);
5 transform-origin:0px 0px;/*以左上角为圆点旋转*/
6 /*取值200px 0px即以右上角为圆点旋转。改属性取值也可以是百分比或关键字。top，botton，left，right，center*/
7 }
3，scale(x，y)
1 div{
2 transform:scale(2,3);
3 }
4 /*元素宽度放大2倍，高度放大3倍*/
scale方法接收两个参数，分别表示元素宽高需要缩放的比例，如果参数介于0到1之间则表示缩小，如果小于0，实际效果相当于翻转元素，感兴趣的朋友可以自行测试，观察效果。
4，skew(x，y)
1 div{
2 transform:skew(30deg,30deg);
3 }
4 /*元素在水平和垂直方向均倾斜30度*/
skew方法接收两个参数，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
四 3D变换
要想使元素以3D效果呈现，你可以给元素的父元素添加transform-style属性。
1 .father{
2 transform-style:preserve-3d;
3 }
4 .son{
5 /*some code*/
6 }
transform-style属性的默认值是flat，即平面的意思。通过设置其值为preserve-3d即可让子元素以3D模式呈现。
事实上，我们是通过配合使用rotate方法，最终实现3D立体效果的。
我们知道，在2D空间，坐标轴只有x和y两根轴，而在3D空间，一共有x，y，z三根轴。我们上面讲解的rotate方法实际上都是围绕z轴在旋转，这也是该方法的默认方式。另外，其实我们还可以通过rotateX()，rotateY()，改变元素默认的旋转轴向。改变旋转轴向配合perspective属性使用效果更佳。
1 .father{ 2 perspective:500px; 3 /*perspective属性取值是一般是一个像素值，设置后可以实现旋转后元素近大远小的效果*/ 4 } 5 .son{ 6 width:200px; 7 height:200px; 8 transform:rotateX(45deg); 9 }
10 /*注意，perspective属性需要设置在旋转元素的祖先元素上，通常我们把它设置在其父元素上。*/
下面是两个3D立方体的示例代码：
HTML部分：
1 <div class="D3">
2 <ul>
3 <li>1</li>
4 <li>2</li>
5 <li>3</li>
6 <li>4</li>
7 <li>5</li>
8 <li>6</li>
9 </ul>
10 <ul>
11 <li>1</li>
12 <li>2</li>
13 <li>3</li>
14 <li>4</li>
15 <li>5</li>
16 <li>6</li>
17 </ul>
18 </div>
CSS部分：
1 body{
2 background-color: #ccc;
3 perspective: 800px;
4 }
5 .D3{
6 width:550px;
7 height: 200px;
8 margin:100px auto;
9 }
10 @keyframes sport{
11 from{
12 transform: rotateX(0deg) rotateY(0deg);
13 }
14 to{
15 transform: rotateX(360deg) rotateY(360deg);
16 }
17 }
18 .D3 ul{
19 width: 200px;
20 height: 200px;
21 position: relative;
22 transform-style: preserve-3d;
23 transform: rotateX(0deg) rotateY(0deg);
24 animation: sport 10s linear infinite alternate;
25 display: inline-block;
26 margin-left:50px;
27 }
28 .D3 ul li{
29 list-style: none;
30 width:200px;
31 height: 200px;
32 position: absolute;
33 opacity: 0.3;
34 font-size: 100px;
35 line-height: 200px;
36 text-align: center;
37 }
38 .D3 ul li:nth-child(1){
39 background-color: red;
40 transform:translateZ(100px);
41 }
42 .D3 ul li:nth-child(2){
43 background-color: blue;
44 transform: rotateX(90deg) translateZ(100px);
45 }
46 .D3 ul li:nth-child(3){
47 background-color: yellow;
48 transform: rotateX(180deg) translateZ(100px);
49 }
50 .D3 ul li:nth-child(4){
51 background-color: pink;
52 transform: rotateX(270deg) translateZ(100px);
53 }
54 .D3 ul li:nth-child(5){
55 background-color: purple;
56 transform: rotateY(90deg) translateZ(-100px);
57 }
58 .D3 ul li:nth-child(6){
59 background-color: green;
60 transform: rotateY(90deg) translateZ(100px);
61 }
62 /*还记得吗？rotate方法是通过改变坐标系来达到旋转的目的哦！*/
五 transform对其他元素的影响
1，提高显示优先级
我们知道，在标准文档流中，如果使用负的margin值可以使一个元素覆盖在另一个元素上，正常情况下是写在后面的元素覆盖前面的。但是设置了transform属性的元素会覆盖其他元素。
1 .top{
2 width: 100px;
3 height: 100px;
4 background-color: red;
5 transform: rotate(0deg);
6 }
7 .bottom{
8 width: 100px;
9 height: 100px;
10 background-color: blue;
11 margin-top:-50px;
12 }
13 /*红色的会覆盖蓝色的div 50px*/
2，改变fixed定位的相对对象
通常情况下，使用了position:fixed;属性的元素都会相对浏览器窗口定位，不受滚动条的影响。但是当我们给其父元素设置了transform属性后，这一状况被改变了。
1 .father{
2 width: 500px;
3 height: 500px;
4 margin-left: 100px;
5 margin-top: 100px;
6 border: 1px solid #000;
7 transform: rotate(0deg);
8 }
9 .son{
10 position: fixed;
11 top: 50px;
12 left:50px;
13 width: 100px;
14 height: 100px;
15 background-color: red;
16 }
17 /*.son不再以浏览器窗口作为参考点，而是以其父元素.father作为按参考点了*/
3，改变absolute定位元素的宽度
以前，如果一个元素设置了绝对定位，并且宽度设置为100%，那么该元素的实际宽度是第一个有定位属性的祖先元素的宽度，没有则是body的宽度。现在，如果第一个有定位属性的祖先元素和绝对定位元素之间，有一个设置了transform属性的元素，那么绝对定位元素的宽度继承链将在该transform祖先元素处被截断，最终绝对定位的元素宽度将继承自transform元素。
1 .grand{
2 width: 500px;
3 height: 500px;
4 border: 1px solid #000;
5 position: absolute;
6 }
7 .father{
8 width: 100px;
9 height: 100px;
10 background-color: red;
11 transform:rotate(0deg);
12 }
13 .son{
14 width: 100%;
15 height: 200px;
16 position: absolute;
17 background-color: yellow;
18 }
19 /*.son的宽度不是500px，而变成了100px*/
写在最后，transform是CSS3才引入的属性，不同浏览器对它的实现也可能有差异，上面介绍的内容并不能保证在所有浏览器上均有相同的表现，具体情况请大家自行测试（我仅在Chrome 76测试）。