动画 animation
-
动画(animation)是CSS3中具有颠覆性的特征之一,
-
可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
-
相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。
-
初学者容易对 动画 和 过渡 傻傻分不清楚
-
过渡 只能看到一次变化过程 如 宽度 1000px 变化到 100px
-
动画 可以设置变化的次数 甚至是无数次
步骤
制作动画分为两步:
- 在css中定义动画函数 @keyframes:关键帧
- 给目标元素调用动画函数
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 我们想页面一打开,一个盒子就从左边走到右边 */
/* 1. 声明动画函数 */
/* keyframes关键帧,理解,定义动画就是定义动画过程中的几个关键帧,然后根据关键帧依次变化*/
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2. 调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
动画序列:
- 0% 是动画的开始,100% 是动画的完成。这样的规则就是动画序列。
- 在
@keyframes
中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 - 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。
总结:
keyframes:关键帧,理解,定义动画就是定义动画过程中的几个关键帧,然后根据关键帧依次变化。
语法
动画常用属性:
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animation | 所有动画属性的简写属性,除了animation-play-state 属性 |
animation-name | 规定@keyframes动画的名称。(必须) |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒,默认是0。(必须) |
animation-timing-function | 规定动画的速度曲线,默认是“ease” |
animation-delay | 规定动画何时开始,默认是0 |
animation-iteration-count | 规定动画被播放的次数,默认是1,还有infinite |
animation-direction | 规定动画是否在下一周期逆向播放,默认是“normal”,alternate逆播放 |
animation-play-state | 规定动画是否正在运行或暂停。默认是“running”,还有“paused” |
animation-fill-mode | 规定动画结束后状态,保持forwards,回到起始backwards |
动画名称
animation-name:xxx;
设置要使用的动画名。
持续时间
animation-duration: 0;
设置动画播放的持续时间, 默认是0s
速度曲线
animation-