在 CSS 中,@keyframes 规则用于创建动画效果。通过定义关键帧(keyframes),我们可以控制动画的每一帧的样式变化。
语法
@keyframes 规则的语法如下:
---------- ------------- - ---- - -- ---- -- - -- - -- ---- -- - -
或者可以使用百分比来定义关键帧:
---------- ------------- - -- - -- ---- -- - --- - -- ---- -- - ---- - -- ---- -- - -
示例
下面是一个简单的 @keyframes 规则的示例:
---------- ------- - ---- - ------------ ----- - -- - ------------ --- - - -------- - ---------- ------- -- --------- -
在这个示例中,元素会从右侧滑入到页面中,并且动画会无限循环。
使用关键帧
要使用关键帧定义的动画效果,可以通过 animation
属性将其应用到元素上:
-------- - ---------- ------------- -------- --------------- ----- --------------- --------- --------- ----------- -
animationName
:指定要应用的动画名称。duration
:指定动画的持续时间。timing-function
:指定动画的时间函数。delay
:指定动画延迟开始的时间。iteration-count
:指定动画的播放次数。direction
:指定动画播放的方向。fill-mode
:指定动画在播放前和播放后的状态。play-state
:指定动画的播放状态。
总结
@keyframes 规则为我们提供了一种在 CSS 中创建动画效果的强大工具。通过定义关键帧,我们可以精确控制动画的每一帧,从而实现各种炫酷的动画效果。希望通过本章节的介绍,你对 @keyframes 属性有了更深入的了解。