评论资讯 [ 总 913 则 ]
·马黑 - 2024-12-19 08:19
·马黑 - 2024-12-16 23:53
·马黑 - 2024-12-15 22:34
·马黑 - 2024-12-14 23:53
·马黑 - 2024-12-13 18:38
·悄然 - 2024-12-7 06:47
·马黑 - 2024-12-5 23:17
·马黑 - 2024-12-1 17:26
·马黑 - 2024-11-28 11:41
·悄然 - 2024-11-24 21:37
·马黑 - 2024-12-16 23:53
·马黑 - 2024-12-15 22:34
·马黑 - 2024-12-14 23:53
·马黑 - 2024-12-13 18:38
·悄然 - 2024-12-7 06:47
·马黑 - 2024-12-5 23:17
·马黑 - 2024-12-1 17:26
·马黑 - 2024-11-28 11:41
·悄然 - 2024-11-24 21:37
友情链接
网站统计
十、关键帧动画@keyframes及其调用方法animation
十、关键帧动画@keyframes及其调用方法animation
CSS3可以设置元素的关键帧动画,并通过元素的 animation 属性对关键帧动画进行调用,使得调用关键帧动画的元素具备动画能力。关键帧动画使用 @keyframes 属性进行设置,语法为:
@keyframes 动画名称 { 动画内容 }
设定关键帧动画有两种方法:
方法一:from ... to ...
from 是“从”的意思,to 意为“到”,表示动画从一个状态到另一个状态的变化。例如:
@keyframes walk {
from { left: 0px; }
to { left: 800px; }
}
这是定义 left 属性的变化,调用了 walk 动画的元素,left 值将从 0px 到 800px 逐步过渡,从而达成元素移动的效果,但需要一个前提:元素的 position 有设定,如绝对、相对定位。如果不想对元素进行 position 设置,可以考虑用 transform 的 translate 或 translateX、 translateY 进行水平或垂直移位:
@keyframes walk {
from { transform: translate(0px); }
to { transform: translate(800px); }
}
方法二:百分比
本法使用百分比表示一个或一系列的属性的变化在某一点(即百分比所表示的时间节点)的形态。例如:
@keyframes walk {
0% { left: 0px; }
100% { left: 800px; }
}
同样的,用transform 的 translate 也可以达成相同的效果,且可以不需要调用动画的元素做 position 设置:
@keyframes walk {
0% { transform: translate(0px); }
100% { transform: translate(800px); }
}
上面的 walk 关键帧动画,其实等价于使用了 from ... to ... 方法的前例,但是,百分比可以拥有更多的节点,10%、20%、……、95%等等都可以,这时候,from ... to ... 方法就不能替代百分比方法。百分比方法可以设置更为细腻的关键帧动画,动画的状态可以精准到每一个百分比的时间节点,代价是使用更多的代码去具体描述动画的过程。
可用于设置关键帧动画的CSS属性很多,但不是全部的属性都可以使用。一般来说,物理位置(如left、margin)、尺寸(如width、height)、外观(如background、border-radius)、2d和3d动画属性(如transition和transform)等等都可以。
有了关键帧动画设置,使用关键帧动画的元素可以通过 animation 属性来调用,简写的语法为(带中括号的参数可省略):
animation: ①动画名称 ②周期时长 ③[运动曲线] ④[播放次数] ⑤[是否反向循环] ⑥[动画停止状态]
例如,#son 选择器要调用 walk 关键帧动画:
#son {
/* 其它代码 */
animation: walk 4s linear infinite alternate;
}
id="son" 的元素,调用了 walk 动画,动画运行的周期是4秒,匀速运行,循环运行,反向运行。
infinite 是循环运行的意思,可以用数字替代它;alternate 动画执行完毕再反向运行,用时也是4秒,一个动画过程因为有来回,实际使用的时间是 2 * 4 = 8 秒。
animate 属性还有分步(step)等参数,详情请自己查阅相关资料。
CSS3可以设置元素的关键帧动画,并通过元素的 animation 属性对关键帧动画进行调用,使得调用关键帧动画的元素具备动画能力。关键帧动画使用 @keyframes 属性进行设置,语法为:
@keyframes 动画名称 { 动画内容 }
设定关键帧动画有两种方法:
方法一:from ... to ...
from 是“从”的意思,to 意为“到”,表示动画从一个状态到另一个状态的变化。例如:
@keyframes walk {
from { left: 0px; }
to { left: 800px; }
}
这是定义 left 属性的变化,调用了 walk 动画的元素,left 值将从 0px 到 800px 逐步过渡,从而达成元素移动的效果,但需要一个前提:元素的 position 有设定,如绝对、相对定位。如果不想对元素进行 position 设置,可以考虑用 transform 的 translate 或 translateX、 translateY 进行水平或垂直移位:
@keyframes walk {
from { transform: translate(0px); }
to { transform: translate(800px); }
}
方法二:百分比
本法使用百分比表示一个或一系列的属性的变化在某一点(即百分比所表示的时间节点)的形态。例如:
@keyframes walk {
0% { left: 0px; }
100% { left: 800px; }
}
同样的,用transform 的 translate 也可以达成相同的效果,且可以不需要调用动画的元素做 position 设置:
@keyframes walk {
0% { transform: translate(0px); }
100% { transform: translate(800px); }
}
上面的 walk 关键帧动画,其实等价于使用了 from ... to ... 方法的前例,但是,百分比可以拥有更多的节点,10%、20%、……、95%等等都可以,这时候,from ... to ... 方法就不能替代百分比方法。百分比方法可以设置更为细腻的关键帧动画,动画的状态可以精准到每一个百分比的时间节点,代价是使用更多的代码去具体描述动画的过程。
可用于设置关键帧动画的CSS属性很多,但不是全部的属性都可以使用。一般来说,物理位置(如left、margin)、尺寸(如width、height)、外观(如background、border-radius)、2d和3d动画属性(如transition和transform)等等都可以。
有了关键帧动画设置,使用关键帧动画的元素可以通过 animation 属性来调用,简写的语法为(带中括号的参数可省略):
animation: ①动画名称 ②周期时长 ③[运动曲线] ④[播放次数] ⑤[是否反向循环] ⑥[动画停止状态]
例如,#son 选择器要调用 walk 关键帧动画:
#son {
/* 其它代码 */
animation: walk 4s linear infinite alternate;
}
id="son" 的元素,调用了 walk 动画,动画运行的周期是4秒,匀速运行,循环运行,反向运行。
infinite 是循环运行的意思,可以用数字替代它;alternate 动画执行完毕再反向运行,用时也是4秒,一个动画过程因为有来回,实际使用的时间是 2 * 4 = 8 秒。
animate 属性还有分步(step)等参数,详情请自己查阅相关资料。
前一篇: 九、文本设置常用方法与技巧
下一篇: 十一、在帖子中使用音频媒体(一)
发表评论:
评论列表 [0条]