关键帧动画html例子,关键帧 | @keyframes

关键帧 | @keyframes

在CSS中，@keyframes根据你定义的样式规则来更有效的控制动画队列中的每一个中间步骤(或者每一个路径点)。用@keyframes来制定动画规则会比使用transition(过渡)来获得更细腻更全面的动画效果。

@keyframes slidein {

from {

margin-left: 100%;

width: 300%;

}

to {

margin-left: 0%;

width: 100%;

}

}

JavaScript可以通过CSS对象模型提供的CSSKeyframesRule接口来访问@keyframes

要使用关键帧动画,需要先创建一个具名的@keyframes规则，以便后续使用animation-name属性来调用指定的@keyframes. 每个@keyframes规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。

你可以在每一个百分比关键帧内写上任意的规则，它们会在该触发的时候被触发。

让关键帧序列生效

为了让一个关键帧列表有效，它必须至少包含了对0%(或from)和100%(或to)即动画的开头帧和结束帧的定义。 如果都没有进行定义，那么整个@keyframes 是无效的，不能使用。

如果在关键帧的样式中使用了不能用作动画的属性，那么这些属性会被忽略掉，支持动画的属性仍然是有效的，不受波及。

重复定义

如果多个关键帧使用同一个