前端学习day25：过渡与动画

1. 动画的定义

动画是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。为了得到活动的画面，每个画面之间都会有细微的改变。

想要在网页中得到动画，如果每一帧都由开发者自己设计，费时费力。css 的动画不像flash一样需要每一帧都来自己设定,   h5和css3的到来就不需要用flash来做动画了, css3为我们提供了两个属性来辅助生成动画：分别是transition过渡和animation动画，而transition过渡属性与animation动画属性可以帮助我们自动地生成动画关键帧。           ps:transition [trænˈzɪʃn] 过渡;转变;变革;变迁；animation [ˌænɪˈmeɪʃn] 生气;活力;富有生命力;(指电影、录像、电脑游戏的)动画制作;动画片

动画可以分为两类
        1.触发式动画  hover(一共会触发两次动画, 一次是第一帧到最后一帧, 另一次是最后一帧到第一帧)  checked acitve
        2.主动式动画  顾名思义就是他自己会动的动画, 不需要我们手动去触发,当元素添加了这个动画以后,页面刷新或者元素出现的一瞬间他就立马执行这个动画。

主动式动画必备的几个要素
            1. 动画的关键帧 (需要手动来规定动画的第一帧和最后一帧,以及中间帧)
            2. 动画需要动画的时长
            3. 动画需要有自己的名字

2. transition过渡

只要是值的变化都可以支持过渡

我们需要指定动画的第一帧与最后一帧，然后由transition自动生成中间的动画帧。

也就是说需要元素的属性发生改变，配合transition即可得到动画。而我们学习过的能使元素属性改变的是一些状态类的伪类选择器，比如:hover，另外通常我们还会配合JavaScript来展示过渡。

来看一个简单的案例：

<style>
  #wrap{
    width: 100px;
    height: 100px;
    background-color: red;

    transition: 2s;
  }
  /*width 和 背景色的变化会在2s内完成*/
  #wrap:hover{
    width: 200px;
    background-color: blue;
  }
</style>
<div id="wrap"></div>

transition分解属性

（transition:过渡属性 过渡时长 速度曲线 延迟时长;）

transition-property

哪个属性需要过渡。默认值为all：表示全部属性都应用过渡。

书写方式 transition-property:属性1,属性2;

transition-duration       ps:duration [djuˈreɪʃn] 持续时间;期间

过渡必备的属性 :

动画时长

transition-duration: 

值可以是s秒或者ms毫秒

1s = 1000ms

过渡持续时间。通常用秒s或者毫秒ms作单位。默认值0，所以这一项是必须的，否则跟瞬间变化没有区别。

transition-timing-function

定义过渡的速度曲线。默认值ease。     ps:ease [iːz] 容易;轻易;不费劲;舒适;安逸;自在;无忧无虑

值	描述
linear( [ˈlɪniə(r)]  线性的)	规定以相同速度开始至结束的过渡效果（等于 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(*n*,*n*,*n*,*n*)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

 

贝赛尔曲线在线生成器地址：https://cubic-bezier.com/

transition-delay

过渡延迟多久后开始执行。通常用秒s或者毫秒ms作单位，默认值是0。

多属性分开设置

如果针对不同属性需要有不同的过渡设置，可以使用逗号分隔开：

transition: width 1stransition-timing , background-color 5s;

动画运动曲线

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(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

3. animation动画

与transition不同的是，animation可以定义好关键帧然后主动地执行动画。    ps:keyframe 要害帧;键架;关键帧;画格;插入关键帧

定义关键帧

@keyframes xxx{ /*xxx为自定义的动画名，可以按照见名知意的原则进行命名*/
    0%{/*第一帧*/
        width: 100px;
    }
    
    30%{/*中间帧会自动生成，也可按照需要自行补帧*/
        width: 0px;
    }
    
    100%{/*最后一帧*/
        width: 500px;
    }
}

调用动画

#wrap{
    width: 100px;
    height: 200px;
    background-color: red;
    
    animation: xxx 5s;/*在5s的时间内，完成xxx指定的动画*/
}

animation分解属性

（animation: name duration timing-function delay iteration-count direction;）

animation-name

调用哪一个动画（哪一个@keyframes）。默认值none，所以必须设置对应动画名。

animation-duration

动画持续时间。通常用秒s 或者 毫秒ms作单位。默认值0，所以这一项是必须的，否则跟瞬间变化没有区别。

animation-timing-function

动画的速度曲线。同transition-timing-function的取值一样。

animation-delay

动画延迟多久后执行。通常用秒s 或者 毫秒ms作单位。默认值0。

animation-iteration-count               ps:iteration  [ˌɪtəˈreɪʃn] 迭代;

规定动画的播放次数，默认值 1 。如果想要无限循环则设置值为 infinite                 ps:infinite [ˈɪnfɪnət] 极大的;无法衡量的;无限的;无穷尽的

animation-direction

规定动画是否反向播放，默认值normal。如果需要反向播放则设置值为 alternate 。    ps:alternate [ɔːlˈtɜːnət , ˈɔːltəneɪt , ˈɔːltɜːnət] 交替的;轮流的;间隔的;每隔(…天等)的

alternate-reverse 起点就方向播放然后到终点再反向回来

reverse 一直反向播放

当设置了反向播放时，动画的播放次数必须大于 1，才能生效。因为第一次播放是不会反向的，第二次播放才会反向，所以动画播放次数起码是2次，才能看到反向效果。

动画运行状态

animation-play-state:running(播放)/ paused(停止)

animation-fill-mode(动画填充模式)

animation-fill-mode用于规定动画在播放之前或之后，其动画效果是否可见。

值	描述
none	默认值，不改变默认行为（delay期间保持初始状态，播放完之后会到初始状态）。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。// 保留最后一帧
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 //回到第一帧
both	向前和向后填充模式都被应用。

 

 

 

 

 

 

（PS：要搞清楚，元素的初始状态和动画的第一帧并不一定是一样的。）

css3中的animation动画复合属性：name(绑定的动画名称) duration(完成时间) timing-function(运动曲线) delay(启动前间隔) iteration-count(播放次数) direction(是否反向) fill-mode(不播放时的样式) play-state(运行或暂停)

4. 注意事项

并不是所有属性都能产生动画效果（比如display、z-index等等），只有确切的数值到数值的变化，或者颜色到颜色的变化，才能拥有动画效果。visibility: hidden; display: none;
这些属性是不支持动画的，举例：

<style>
  #wrap{
    width: 100px;
    height: 200px;
    background-color: pink;
    position: relative;

    transition: 1s;
  }
  #wrap:hover{
    top: 20px;/*这里并不会产生动画，因为 top的初始值是auto， auto变到20px并不是一个数值到数值的变化，所以没法产生动画*/
  }
</style>
<div id="wrap"></div>