CSS3–动画和渐变
变形
transform
用于元素的变形，实现元素的选装，缩放，移动，倾斜等变形效果。
1 | transform：none|functions |
旋转
rotate（）函数用于定义元素在二维空间的旋转
1 | rotate（angle） |
angle单位是deg。值为正表示顺时针旋转，值为负表示为逆时针旋转
1 | -webkit-transform：rotate（30deg）； |
缩放和翻转
scale用于实现元素在二维空间的缩放和翻转scale（x，y）
- x：表示元素在水平方向上的缩放倍数
- y：表示元素在垂直方向上的缩放倍数
- x、y的值可以为整数、负数、小数。当绝对值大于1表示放大，绝对值小于1表示缩小。当值为负数时，元素会被翻转如果y值省略，说明垂直方向上的缩放倍数跟水平方向上的缩放倍数相同
1 | -webkit-transform：scale（1.5）； |
元素会放大1.5被倍数
1 | -webkit-transform：scale（0.8，-1.5）； |
水平方向缩小，垂直方向为负值，且绝对值大于1，表现为元素会在垂直方向上放大并且翻转。
移动
translate用于定义元素在二维空间上的移动translate：（dx，dy）；
- dx：表示在水平方向上的偏移距离
- dy：在垂直方向上的偏移距伦理
- dx、dy可以为负值和带小数的值，若取值大于0表示向下或享有偏移，取值小于0表示向上或向左偏移。如果dy值省略，表示垂直方向上的偏移距离默认为0.元素会向右偏移10px，向下偏移5px
1
2
3
4
5-webkit-transform：translate（10px 5px）；
-moz-transform：translate（10px 5px）；
-o-transform：translate（10px 5px）；/*presto内核*/
-ms-transform：translate（10px 5px）；/*IE9*/
transform：translate（10px 5px）；表示元素会在水平方向上向左偏移10px，垂直方向上不偏移1
2
3
4
5-webkit-transform：translate（-10px）；
-moz-transform：translate（-10px）；
-o-transform：translate（-10px）；/*presto内核*/
-ms-transform：translate（-10px）；/*IE9*/
transform：translate（-10px）；
倾斜
skew（）用于定义元素在二维空间上的倾斜变skew（angleX，angleY）
- angleX：在水平方向的倾斜度数
- angleY：在垂直方向上的倾斜度数
angleX、angleY单位是deg，值为正表示顺时针旋转，值为负，表示逆时针旋转。如果angleY省略，则说明垂直方向上的倾斜度数默认是0。水平方向顺时针倾斜30度。1
2
3
4
5-webkit-transform：skew（-30deg）；
-moz-transform：skew（-30deg）；
-o-transform：skew（-30deg）；/*presto内核*/
-ms-transform：skew（-30deg）；/*IE9*/
transform：skew（-30deg）；水平方向倾斜30度，垂直方向逆时针倾斜10度1
2
3
4
5-webkit-transform：skew（30deg，-10deg）；
-moz-transform：skew（30deg，-10deg）；
-o-transform：skew（30deg，-10degg）；/*presto内核*/
-ms-transform：skew（30deg，-10deg）；/*IE9*/
transform：skew（30deg，-10deg）；
同时使用多个变形函数
可以同时使用多个变形函数
1 | -webkit-transform：translate（10px，10px） rotate（30deg） scale（1，-1）； |
当变形函数的顺序调换了不一样的时候，可能会产生不一样的变形效果
1 | -webkit-transform： rotate（30deg） translate（10px，10px） scale（1，-1）； |
transform-origin
定义变形原点transform-origin：x，y
- x：定义变形的横坐标位置，默认值是50%，取值包括left、center、right、百分比值、长度值
- y：变形的纵坐标位置，默认是50%，取值包括top、middle、bottom、百分比值、长度值
百分比是相对于元素对象的宽度和高度而言的，而该坐标位置的计算，是以元素的左上角为坐标原点进行计算的。表示以该元素的左上角为原点，进行相关变形操作1
2
3
4
5-webkit-transform-origin：0 0；
-moz-transform-origin：0 0；
-o-transform-origin：0 0；/*presto内核*/
-ms-transform-origin：0 0；/*IE9*/
transform-origin：0 0；
过渡效果
transition
1 | transition：transition-property||transition-duration||transition-timing-function||transition-delay |
- transition-property：定义过度的属性
- transition-duration：定义过渡过程需要的时间
- transition-timing-function：过渡方式
- transition-delay：延迟时间
可以同时设置定义两组或两组以上的过渡效果，每组用逗号间隔。
包含子属性：transition-property、transition-duration、transition-timing-function、transition-delay。
都需要加前缀。1
2
3
4
5-webkit-transition：all 1000ms linear 500ms；
-moz-transition：all 1000ms linear 500ms；
-o-transform-transition：all 1000ms linear 500ms；/*presto内核*/
-ms-transform-transition：all 1000ms linear 500ms；/*IE9*/
transform-transition：all 1000ms linear 500ms；
transition-property
过度属性。transition-property：none|all|property
- none：表示没有任何CSS过度属性
- all：为默认值，表示所有的CSS属性都有过渡效果
- property：指定一个用逗号分隔的多个属性，针对指定的这些属性有过渡效果。
transition-duration
用于定义过渡过程中需要的时间
- transition-duration：time；
- time：指定一个用逗号分隔的多个时间值，时间的单位可以是s或ms。默认情况下为0，即看不到过渡效果，看到的直接是结果。
transition-delay
transition-delay：time
单位可以是s，ms，默认为0.没有时间延迟，立即开始过渡效果。
transition-timing-function
1 | transition-timing-function：ease|linear|ease-out|ease-in|ease-in-out|cubic-bezier（n，n，n，n）； |
- linear：过度一直是一个速度，相当于cubic-bezier（0，0，1，1）
- ease：属性的默认值，表示过度的速度先慢再快最后非常慢，相当于cubic-bezier（0.25，0.1，0。25，1）
- ease-in：过度速度先慢后越来越快，直至结束，相当于cubic-bezier（0.42，0，1，1）
- ease-out：过渡速度先快后越来越慢，直至结束，相当于cubic-bezier（0，0，0.58，1）
- ease-in-out：过渡速度在开始和结束时都很慢，相当于cubic-bezier（0.42，0，0.58，1）
- cubic-bezier：自定义贝塞尔曲线效果，四个参数为0到1的数字。
动画
@keyframes
1 | @keyframes animationname{keyframes-selector{css-styleless}} |
- animationname：动画的名称。必须定义一个动画名称，方便与动画属性animation绑定
- keyframes-selector：动画持续的百分比，也可以是从from到to；from=>0%，to=>100%。必须顶一个才能实现动画
- css-styleless：设置的一个或多个合法的样式属性，必须定义一些样式才能实现动画
关键帧动画是通过名称和动画绑定的。例如
1 | @-moz-keyframes mymove{ |
animation
专门用于动画设计，可以把一个或多个关键帧动画绑定到元素上，以实现更复杂的动画
1 | animation：name duration timing-function delay iyeration-count direction |
- name：动画的名字，绑定指定的关键帧动画，默认值为none，表示没有动画
- duration：动画播放的周期时间，默认为0
- timing-function：动画的播放方式，即速度曲线
- delay：动画的延迟时间，默认0
- iyeration-count：动画应该播放的次数，infinite表示无限次的播放下去，默认属性值为1
- direction：播放的顺序方向，normal（默认值，按照关键帧定义的动画方向播放）altenate（表示动画的播放方向与上已播放周期相反）
animation可以定义一个动画的6个方面的参数信息，还可以定义多个动画，每个动画的参数信息为一组，用逗号分开来。‘
包含子属性：animation-name、 animation-duration 、animation-timing-function、animation- delay 、animation-iyeration-count、animation- direction