CSS3属性transition和animation详解

过渡和动画

在不使用flash或者JavaScript的情况下做出元素的规律运动的效果，可以使页面变得非常丰富，表现力强。

一 . 过渡 transition

使元素由一种样式变成另一种样式:

为变化添加过程与加效果。

为元素添加transition样式(尽量不要写到伪类中)

transition是一个复合属性：

1. 过渡属性分样式

1.1 过渡属性 transition-property:

规定过渡作用在元素的哪条样式上

过渡属性值:

1. none： 没有过渡属性(清除)
2. all： 对所有可能样式生效(默认值)
3. width/height/… 多个以逗号分隔

1.2 过渡时间 transition-duration：

规定属性发生变化的过渡时间

默认值是0，不写时长等于看不到效果

单位秒（s）和毫秒（ms）

1.3 过渡延迟 transition-delay:

过渡开始前的等待时间， 不计入过渡时间中

注意： transition-delay在恢复也生效

1.4 过渡效果的速率(速度变化) transition-timing-function:

过渡时间的速度函数

常见值(关键词):

1. ease；先慢后快后慢（默认值）
2. linear；匀速
3. ease-in; 匀加速
4. ease-out； 匀减速
5. ease-in-out; 快->慢->快

特殊值(贝塞尔曲线)

一个带参数的曲线，用于描述运动速度的变化，可以非常精确自由方便的控制变化速率

cubic-bezier(x1,y1,x2,y2);

1. x1起点在x轴的坐标 为0-1
2. y1起点在y轴的坐标 不限
3. x2终点在x轴的坐标 为0-1
4. x2终点在x轴的坐标 为0-1

起点对应的 y=x 为匀速,y>x 为加速,y 终点对应的 y=x 为匀速,y>x 为减速,y

具体参考：http://cubic-bezier.com

2. 过渡复合样式

复合写法只写transition:

transition: 过渡属性 过渡时间 过渡延迟 过渡效果的速率；

transition: property duration delay timing-function;

transition:width 2s,height 4s;

注意:

只有时长不可省略

二. 动画 animation

transition只能描述开始结束的变化过程，animation能精确控制各种时间进程的状态。

注意:animation必须与@keyframes一起使用

animation是复合属性

1. @keyframes 定义动画

写法:

@keyframes  animationname{  
    keyframes-selector{css-style}
}

1. animationname：自定义动画名称
2. keyframes-selector：动画时长百分比(关键帧)
   • 0%-100%（在之间需要执行什么事件）
   • from(0%) to(100%) 可以只有to
3. Css-style：一个或多个合法的css属性

动画示例:

@keyframes run{
       0%{width:0px,background:red;}
       100%{width:50px,background:green;}
}

当帧动画一样的时候： 例如：

@keyframes  run {
    0%{width:0px,background:red;}
    20%{width:0px,background:red;}
    80%{width:500px,background:greend;}
    100%{width:500px,background:greend;}
}

可以写成

@keyframes  run {
    0%，20%{width:0px,background:red;}
    80%，100{width:500px,background:greend;}
}

​

2. 动画属性的分样式

1.1 动画的名称(自定义的) animation-name

调用自定义动画

none：不引用任何动画名称

@keyframes绑定的名称

1.2 动画执行时间 animation-duration

单位秒（s）和毫秒（ms）

1.3 延迟执行时间 animation-delay

动画延时（s/ms）(支持负数)

1.4 动画速度曲线 animation-timing-function:

常见值(关键词):

1. ease；先慢后快后慢（默认值）
2. linear；匀速
3. ease-in; 匀加速
4. ease-out； 匀减速
5. ease-in-out; 快->慢->快
6. cubic-bezier() 贝塞尔曲线

特殊值(贝塞尔曲线)

一个带参数的曲线，用于描述运动速度的变化，可以非常精确自由方便的控制变化速率

cubic-bezier(x1,y1,x2,y2);

类似于transition-timing-function

steps(n)；逐帧动画

1.5 动画执行次数 animation-iteration-count:

n 次数数值(默认一次)

infinite（关键词，无限重复次数）

1.6 执行方向 animation-direction:

多次运动才能出发此效果

属性值:

1. normal 正常播放,结束后会回到起点，默认
2. reverse： 反向播放，和normal相反
3. alternate 播放结束之后反向回到开头,偶数次反向
4. alternate-reverse：先反后正，和alternate相反

1.7 动画暂停 animation-play-state:

属性值:

1. paused 暂停动画(在运动的元素状态转换成paused时停止动画)
2. running 运行动画(停止状态换成running状态会继续动转画)

1.8 动画结束之后的状态 animation-fill-mode:

只能运用于结束动画之后

属性值:

1. none 默认 原始状态>动画>原始状态
2. forwards 原始状态>动画>停在动画帧100%
3. backwards (忽略原始状态)进入动画帧0%>动画>原始状态
4. both (忽略原始状态)进入动画帧0%>动画>停在动画帧100%

3. 动画的复合样式

复合写法的属性为animation

复合写法：animation: name duration delay timing-function iteration-count direction;