012-Web前端-CSS动画-过度与动画

#6.2 接上篇 ：过度与动画

---

一、过度Transition

使用css的属性值在一段时间内平滑的过渡

1）指定四个要素：

过渡属性，如background、color等

过渡所需时间

过渡函数，即过渡的速度、方式等

过渡延迟时间，表示开始执行的时间

2）触发过渡

通过用户的行为触发，如点击、悬浮等

---

1.过渡属性

transition-property: none | all | property ; 多个属性用逗号隔开

可设置过渡的属性：

颜色属性 取值为数值的属性 转换属性 渐变属性 阴影属性

2.过渡时间

transition-duration: s | ms;

默认值为0，意味着不会有效果，所以必须设置transition-duration属性

3.过渡函数

transition-timing-function: ####;

取值：

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

linear：匀速

ease-in：规定以慢速开始，加速效果

ease-out：规定以慢速结束，减速效果

ease-in-out：规定以慢速开始和结束，先加速后减速效果

4.过渡延迟

transition-delay: s|ms;

改变元素属性值后多长时间开始执行过渡效果

---

5.简写属性transition

transition属性是一个简写属性，用于设置四个过渡属性

语法：transition:property duration timing-function delay;

           transition: background 4s linear 1s;

---

二、animation动画

过渡属性只能模拟动画效果，animation属性可以制作类似Flash动画，通过关键帧控制动画的每一步，使元素从一种样式逐渐变化为另一种样式，实现复杂的动画效果。

分两步：

Step1. 声明动画 @keyframes

@keyframes作用：

用于声明动画，指定关键帧

帧，用于分解动画动作 每个帧代表某个时间点 定义每个帧上的动作

@keyframes的语法：

@keyframes name  {

    from|0%{

        css样式

    }

    percent{ //任意个

        css样式

    }

    to|100%{

        css样式

    }

}

Step2. 调用动画 animation属性

animation属性用于控制动画

调用由@keyframes定义的动画

设置动画属性，如时间、次数等

animation属性是一个简写属性

语法为：animation:name  duration timing-function delay iteration-count direction;

 

Ex3.动画子属性

animation-name: ; 调用动画，规定需要和keyframes的名字一致

animation-duration: s|ms; 动画完成一个周期所需要的时间

animation-timing-function: ; 规定动画的速度变化类型

animation-delay:s|ms ; 播放之前的延迟时间

animation-iteration-count: 数值|infinite; 播放次数，infinite表示无限次播放

animation-direction: normal|alternate; 动画播放方向，normal为默认值，表示正常播放

alternate表示轮流播放，即动画会在奇数次正常播放，而在偶数次向后播放

animation-fill-mode: forwards; 动画停在最后一帧，默认值为none

animation-play-state:paused|running; 属性规定动画正在运行还是暂停，默认值为running

---

#接下篇