过渡模块和动画模块的区别：过渡动画需要人为的去触发这个反应，而动画模块不需要人为相同点：都是动画；都是系统新增的属性；都是要满足三要素才有动画效果三要素：1.告诉系统执行哪个动画，要写出动画名称；animation-name:名称; 2.告诉系统我们需要创建一个名称的动画； @keyframes 名称 { from{
} to{
} } 3.告诉系统动画持续时长; animation-duration:动画持续时间;其他属性：动画运动的速度：animation-timing-function：（linear-线性...）； 动画延迟多少秒执行：animation-delay：秒数； 动画执行次数：animation-iteration-count：次数； 动画是否轮流反向播放：animation-direction：alternate（轮流反向播放）normal（正常播放，默认取值）； 控制动画的发生和静止：animation-play-state：running（动画正在播放，默认取值）paused（动画静止）； 注意点：第二种方式制作动画不用from-to用百分比，好处可以设置任意多的节点 0%{
} 50%{
} 100%{
} 动画是有一定的状态的：1.等待状态；2.执行状态；3.结束状态； animation-fill-mode（动画等待和结束状态的样式）：none（不做任何改变） backwards（动画第一帧的状态） forwards（动画最后一帧的状态） both(动画从第一帧的样式开始最后停留在最后一帧) 动画模块的连写：animation：动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画模块</title>
<style>
@keyframes {
}
div{
animation-duration: ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
原文地址：https://www.cnblogs.com/myErebos/p/8586433.html
时间： 2024-10-07 22:00:13