HTML 动画模块

动画模块

动画模块与过渡模块相同点

动画模块与过渡模块十分相似，也是还给某一元素添加动画效果，要想实现也是需要满足三要素

动画模块与过渡模块区别

过渡动画必须人为的触发才会执行动画，动画不需要人为的触发就可以执行动画

动画模块的基本使用

/*动画三要素：*/
/*(1)告诉系统哪个属性需要执行动画：*/
animation-name:动画名称;
/*(2)告诉系统我们需要创建一个名字叫动画名称的动画：*/
@keyframes 动画名称{
    from{
        margin-left:0px;
}
    to{
        margin-left:500px;
}
}
/*(3)告诉系统动画的持续时间：*/
animation-duration:1s;

动画模块的其他属性

/*告诉系统延迟执行动画的时长*/
animation-delay:2s;
/*告诉系统执行动画的速度*/
animation-timing-function:速度;
/*告诉系统执行动画的次数*/
/*infinite:无限次*/
animation-iteration-count:3;
/*告诉系统是否需要执行往返动画*/
animation-direction:(nomal/alternate)
/*normal:执行完一次回到起点再次执行*/
/*alternate:执行完一次往回执行下一次*/
/*控制动画状态(暂停/运动)，一般用于hover*/
animation-play-state:paused/running;

创建动画的第二种形式

@keyframes 动画名称{
    0%{
       ···
}
    25%{
       ···
}
    50%{
       ···
}
    100%{
       ···
}
}
/*在不同的状态时执行不同的动画*/

动画是有一定状态的

• 等待
• 执行
• 结束

/*指定动画等待状态和结束状态的样式*/
animation-fill-mode:none;
/*none:无样式*/
/*backwards:让元素等待状态时显示第一帧的样式*/
/*forwards:让元素结束状态时保持最后一帧的样式*/
/*both:让元素等待状态时显示第一针的样式,结束状态时保持最后一帧的样式*/

动画模块的连写

animation:名称 时长 速度 延迟 次数 往返模式；