前端十三课--触发式动画及主动式动画

动画的制作：

1.用户需要定义第一帧和最后一帧的，中间的帧数由计算机辅助生成；

2.用户定义第一帧到最后一帧的动画时间(根据此事件计算机算出具体需要帮我们生成的帧数)

触发式动画：

1.触发条件:hover(鼠标悬浮)，:checked(选项选中), :active(输入框点击)

​ 元素默认的状态赋予动画的第一帧，触发动作赋予元素动画的最后一帧；

2.动画执行得时间：transition-duration:2s；

​ 帧数=2s*60帧/s=120帧；

3.transition-delay:3s;动画延迟执行；

4.类似于display：none；display：block;是一个元素的出现和消失，所以无法设置动画。

​ 只有数字参与的参数才能够设置动画；

动画时间参数：

1.过渡动画时间函数：transition-timing-function 定义动画从第一帧到最后一帧变化过程的速率变化;

2.与设置动画时间不一样，transition-duration决定的是动画帧数，transition-timing-function决定的是两帧之间的变化速率；

3.默认值ease(慢-快-慢):transition-timing-function:ease;

匀速：linera;

慢速结束：ease-out;

慢速开始：ease-in;

慢速开始和结束：ease-in-out;

贝塞尔曲线：cubic-bezier(.33,.1,77,.36,-1.81);

ease的贝塞尔曲线：cubic-bezier(0.25,1.01,0.25,0.1) ;

动画效果消失属性：

transition-property:none;

peoperty:参与动画的属性名，多个属性用逗号隔开(也就是触发元素里面进行动画的属性)

例:proerty：width(宽实现动画)/height(高实现动画)/all(触发元素中的全部属性都实现动画);

复合属性写法：

1.transition:propety duration timing-function delay

过渡动画：属性名 动画时长 时间函数 延迟时间；

2.动画一般写在元素样式里面，不写在hover中，写在hover中只有出现hover中样式的时候才会出现样式。

二级菜单：

主动式动画：

动画的创造：

@keyframes 动画名称{

​ 0%（状态1）{

​ width:500px;

​ height:100px;

}

​ 50%（状态2）{background-color:}

​ 100%(状态3){

​ width:300px;

​ height:300px;

		background-color:

}

}

0%动画开始位置，可以不是元素的初始位置；

**动画和元素的关联（元素内加属性）：**动画名称：animation-name：（这里的动画名称要与自动设置动画的动画名称相同）

**动画时长：**animation-duation:5s；(时间必须写在实现动画元素的的里面，不能写在自行创造关键帧的转态里面效果是没有的)

**动画次数：**animation-iteration-count:3/infinite(循环);(每次开始默认为0%的状态)

**贝塞尔函数：**animation-timing-function:cubic -bezier(.35,.3,2.4,-5.6);

**动画延迟：**animation-delay:2s;

动画是否正反向执行：

animation-direction：normal;(默认值,正常执行);

reverse;反向执行；

alternate:(正反向切换执行，动画看起来更连贯)；

alternate-reverse:反正向切换执行；

复合写法：

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

动画：名称 时长 时间函数 延迟 次数 方向

动画循环播放最后停止的状态：

animation-fill-mode:backwards;(保留第一帧,动画初始的样式)

forwards;(保留最后一帧)

both(自适应)

触发式主动动画的暂停和播放：

:hover{

animation-play-statre:paused;(动画在播放时鼠标f放入时暂停)

animation-play-state:running;(动画在播放时点击播放)}