CSS3动画

一、transition过渡动画

语法: transition: 过渡属性 过渡时间 过渡延迟时间 过渡方式;

1.transition-property(过渡属性)

取值：

none 默认值，没有属性发生过渡

all 所有发生变化的css属性都添加过渡

eg: transition:all 1s;

ident 指定发生过渡的css属性列表

eg: transition:transform 3s,background 2s,border-radius 1s;

2.transition-duration(过渡时间)

取值：

0 默认值，不发生过渡，直接看到结果

time 按照设置的时间执行过渡动画，单位为s或者ms

3.transition-delay(过渡动画延迟执行时间)

取值：

0 默认值，不延迟

正值 按照设定的时间延迟执行过渡动画

负值 设置时间前的动画将会被截断

4.transition-timing-function(过渡方式)

取值：

ease 默认值，缓解效果

linear 线性效果(匀速运动)

ease-in 渐显效果(加速运动)

ease-out 渐隐效果(减速运动)

ease-in-out 渐显渐隐效果(慢-快-慢)

二、animation动画

语法：animation:动画名称 动画执行时间 动画延迟执行时间 动画播放次数 动画的播放状态 动画时间之外的状态 动画运动方向 动画执行方式;

♥ 说明：

在添加animation动画之前首先要定义动画关键帧，语法如下

@keyframes 动画名称{
0%{
属性:属性值;
…
}
20%{
属性:属性值;
…
}
…
100%{
属性:属性值;
}
}

或：

@keyframes 动画名称{
from{
…
}
…
to{
…
}
}

注：@keyframes兼容写法：

@-webkit-keyframes 动画名称{…}

1.animation-name(动画名称)

eg: animation:box_ani 1s;

注：animation中的动画名称要和@keyframes中定义的动画名称一致

2.animation-duration(动画执行一次所需时间)

取值：

0 默认值，动画不执行

time 按照设定的时间执行动画，单位为s或者ms

3.animation-delay(动画延迟执行时间)

取值：

0 不延迟

正值 按照设置的时间延迟执行动画

负值 设置时间前的动画将会被截断

4.animation-iteration-count(动画播放次数)

取值：

0 不执行动画

正整数 指定播放次数

infinite 无限循环播放

5.animation-play-state(动画播放状态)

取值：

running 默认值，运动状态

paused 动画暂停

eg: .box{animation:box_ani 5s infinite;}

 .box:hover{animation:box_ani 5s infinite paused;}

6.animation-timing-function(animation动画执行方式)

取值：

ease|linear|ease-in|ease-out|ease-in-out

step-start 马上转跳到动画结束状态

step-end 保持动画开始时的状态，直到动画结束时，转跳到动画结束状态

steps(n,start|end) n代表动画分几步完成

7.animation-direction(动画运动方向)

取值：

normal 默认值，正常方向运动

reverse 与normal方向相反

alternate 正反方向交替运动，奇数次正方向，偶数次反方向

alternate-reverse 奇数次反方向，偶数次正方向

8.animation-fill-mode(对象动画时间之外的状态)

取值：

none 默认值，不设置动画时间之外的状态

forwards 保持动画结束时的状态

backwards 动画结束后，返回动画开始时的状态

both 遵循forwards和backwards两个规则

三、★transition和animation的区别

1.transition需要触发条件，页面加载完成后不会自动执行

animation不需要触发条件，页面加载完成后自动执行

2.transition只有开始和结束两个状态，不能设置中间状态

animation可以像flash一样，设置中间的关键帧

3.transition触发一次执行一次，再次执行需要再次触发

animation可以指定执行的次数或者无限循环播放

扩展：倒影

语法：-webkit-box-reflect:left|right|above(上)|below(下) 偏移量 渐变;

扩展：背景在文本区域可见

语法：-webkit-background-clip:text;

注：设置为text时，color要设置为transparent透明