css3新增动画属性.pdfVIP

一、transform：需要结合translate、scale、rotate、skew四个函数使用

1.translate：平移

1)translateX：水平位移，属性值为像素值，如果是正数，表示向右，否则表示向左

2)translateY：垂直位移，属性值为像素值，如果是正数，表示向下，否则表示向上

3)复合属性translate(值)，如果是一个值表示水平，如果是两个值，值和值用逗号分隔，第二个值表示

垂直

2.scale：缩放，属性值数值，1表示不缩放，小于1表示缩小，大于1表示放大，简言之，属性值表示变化

的倍数

1)scaleX：宽度的缩放

2)scaleY：高度的缩放

3)复合属性scale（值），如果写一个值，该值表示宽度和高度，如果写两个值，第一个值表示宽度，第

二个值表示高度

3.rotate：旋转，属性值为度数，格式transform：rotate(度数deg)，如transform：rotate(30deg)

4.skew：拉伸，格式shew（角度deg）

1)skewX：沿X轴拉伸

2)skewY：沿Y轴拉伸

3)复合属性skew：格式为skew（值），如果写一个值，该值表示沿X轴拉伸，如果写两个值，那么第

一个值表示沿X轴拉伸，第二个值表示沿Y轴拉伸

二、transform-origin：设置元素变形时的参照物，设置为left、center、right、top、center、bottom，也可以

是像素值，格式transform-origin:水平的值垂直的值

三、transition属性：设置元素的渐变效果（过渡效果）

1.transition-property：设置允许哪些属性可以有渐变的效果，属性值可以是CSS属性名称、all、none

2.transition-duration：设置渐变的时间，属性值为秒（如5s）或毫秒（如5000ms），如果省略，默认为

0，1秒=1000毫秒

3.transition-timing-function：设置过渡方式

1)ease：规定慢速开始，然后变快，然后慢速结束的过渡效果

2)linear：规定以相同速度开始至结束的过渡效果

3)ease-in：规定以慢速开始的过渡效果

4)ease-out：规定以慢速结束的过渡效果

5)ease-in-out：规定以慢速开始和结束的过渡效果

4.transition-delay：设置延迟时间，属性值为秒或毫秒

5.transition的复合属性，格式为：transition：propertydurationtiming-funcitondelay

四、animation：动画属性，使用时需要先创建动画帧

创建动画

@keyframes动画名称{

动画执行时的不同阶段（可以用from和to表示，也可以用百分比表示）

}

应用动画

1.animation-name：设置动画名称

2.animation-duration：设置动画执行所需时间，属性值为秒或毫秒

3.animation-timing-function：规定动画的速度曲线，默认为ease，作用和transition-timing-function一样

4.animation-delay：设置动画延迟时间，属性值为秒或毫秒

5.animation-iteration-count：设置动画执行次数，属性值就是次数，如果写infinite表示无限次

6.animation-direction：设置动画方向，属性值为normal（正常）、alternate（反向），注意如果要有反向效果，

那么次数必须是2次以上（包含2次）

7.animation复合属性，格式为：animation：namedurationtiming-functiondelay