CSS动画，2D和3D模块
- 2019 年 10 月 11 日
- 筆記
CSS3提供了丰富的动画类属性，使我们可以不通过flash甚至JavaScript，就能实现很多动态的效果。它们主要分为三大类：transform（变换），transition（过渡），animation（动画）。其中transform又分为2D变换和3D变换，它赋予了我们不通过专业设计软件制作平面或者立体图形的能力。
一 过渡
通过给元素设置transition属性设置它的过渡效果。过渡实际定义的是元素从一种状态变成另一种状态的过程，比如宽度从100px变成300px，背景颜色从red变成orange等等。
1 div{ 2 width:200px; 3 height:200px; 4 background-color:red; 5 transition-property:width,background-color; 6 /*该属性指定需要变换的元素属性，不同属性用逗号隔开*/ 7 transition-duration:1s; 8 /*该属性指定整个过程花费的时间，如需单独为每个变化的属性设置时间，请使用逗号隔开*/ 9 transition-timing-function:ease; 10 /*该属性设置变化的速度曲线，默认值即是ease，表示慢-快-慢，还有几个其他的取值：linear，匀速；ease-in，慢-快，ease-out，快-慢，ease-in-out，慢-快-慢，肉眼效果和ease相似*/ 11 transition-delay:1s; 12 /*延迟时间*/ 13 }
元素的属性设置好以后，需要某些操作触发了指定属性的变化才能看到效果，必如：hover，或者JS事件。
另外，transition实际是一个复合属性，多个属性过渡可以简写：
1 div{ 2 width:200px; 3 height:200px; 4 transition:width 2s 1s,background-color 2s; 5 /*transition-property和transition-duration是必须的，另外两个是可选的*/ 6 } 7 div:hover{ 8 width:400px 9 }
当有多个属性需要设置过渡，并且持续事件，速度曲线，延迟时间均相同时，你可以如下简写：
1 div{ 2 /*some code*/ 3 transform:all 2s; 4 /*所有发生变化的属性都设置过渡效果*/ 5 }
二 动画
动画其实和过渡一样，都是用来给元素设置动态效果的，不同的是，过渡需要人为的触发才能被执行，而这里将要讲解的动画不需要人为触发。
在给元素设置动画之前，我们首先应该创建一个动画效果，即开始是什么状态，结束是什么样的状态。
1 @keyframes sport{/*sport是动画的名称，可以自定义*/ 2 from{ 3 width:200px; 4 } 5 to{ 6 width:400px; 7 } 8 /*除了使用from...to的方式，你还可以使用百分比创建更加丰富的动画过程，0%表示开始时，100%表示结束时*/ 9 }
创建好动画之后，你就可以为元素设置诸如动画持续时长，速度曲线，重复次数等属性了。
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测试）。
