012 HTML+CSS(Class133 - 151)
[A] 浏览器前缀
transition过渡
transition-property: 规定设置过渡效果的css属性的名称
transition-dutation: 规定完成过渡效果需要的时间(秒或者毫秒)
transition-delay: 规定完成过渡效果可延迟的时间
transition-timing-function: 规定过渡效果的速度曲线
【注】transition属性复合写法：
transition: all 1s 1s linear; //顺序无所谓
【注】transition过渡属性不能添加在hover上，因为鼠标离开目标元素，该hover属性即立即消失，此后元素恢复到原来样式时会立即变化
[C] transform变形效果
参数:
1. translate(m, n) 定义2D位移,沿X轴移动m像素，沿Y轴移动像素
translate3d(m, n, k) 定义3D位移,沿X轴移动m像素，沿Y轴移动像素,沿Z轴移动k个像素
translateX(m) 沿X轴移动m像素
translateY(n) 沿Y轴移动n像素
translateZ(k) 沿Z轴移动k像素，只适用于3D
2. scale(a,b) 定义2D缩放,沿X轴缩放a，沿Y轴缩放b，正常大小为1，小于1表示缩小，大于1表示放大。
scale(a,b,c) 定义3D缩放。
scaleX(a) 沿X轴缩放a
scaleY(b) 沿Y轴缩放b
scaleZ(c) 沿Z轴缩放c，只适用于3D
3. rotate(a) 定义2D旋转，沿z轴旋转对应角度a
rotate3d(x,y,z,t) 定义3d旋转，旋转轴为x,y,z定义的矢量，旋转角度为t
rotateX(a) 沿X轴旋转a 3d
rotateY(b) 沿Y轴旋转b 3d
rotateZ(c) 沿Z轴旋转c
【注】记得加单位deg
4. skew(a,b) 斜切,分别向x，y轴倾斜
skewX(a)
skewY(b)
【注】记得加单位deg
【注意事项】
a. 变形操作不会影响其他元素(其他元素可能会被覆盖挡住)
b. 变形操作只能添加给块元素，不能添加给内联元素
c. 符合写法，可以同时添加读个变形操作
执行是有顺序的，先执行后面的操作，再执行前面的操作
参数：
a. animation-name: 设置动画的名字(用户自定义)
动画的名字是和关键帧配合使用的：
@keyframes name{
0%{样式1}
25%{样式2}
50%{样式3}
75%{样式4}
100%{样式5}
}
b. animation-duration: 动画的持续时间
c. animation-delay: 动画的延迟时间
c. animation-iteration-count: 动画的重复次数。默认为1
d. animation-timing-function: 动画的运动形式(线性，减速......)
【注】
1. 默认动画完成后，弹回到最初的位置。
2. 可运用复合样式书写
animation补充样式：
animation-fill-mode: 规定动画播放之前或之后，其动画效果是否可见
参数：
none：默认值，在运动结束之后回到初始位置，如果有延迟，让0%在延迟后生效
backwards: 有延迟时，让0%在延迟前生效
animate.css动画库
一款强大的预设css3动画库
官方网址：https://daneden.github.io/animate.css/
使用方法：
1. head中添加link，引入外部css样式
<link rel="stylesheet" href="./animateCarrey.css">
2. 通过行内样式的class调用
class = "animated swing infinite"
[E] 动画练习
立方体旋转
旋转木马
