在css中,@keyframes规则可以使用来创建动画,创建动画是通过逐步改变从一个CSS样式到另一个CSS样式,在动画过程中,您可以更改CSS样式的设定多次,指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同,0%是开头动画,100%是当动画完成。为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器。
@keyframes规则是css3中新增规则,目前主流浏览器都支持该规则(加浏览器对应的前缀),但不兼容IE 9以及更早版本的浏览器。
该规则的语法如下:
@keyframes animationname {keyframes-selector {css-styles;}};
animationname:定义animation的名称;
keyframes-selector:动画持续时间的百分比,可能的值:0-100%、from (和0%相同)、to (和100%相同)。您可以用一个动画keyframes-selectors;
css-styles :一个或多个合法的CSS样式属性;
下面的示例显示了实际@keyframes的规则。
.box { width: 50px; height: 50px; background: red; position: relative; /* Chrome, Safari, Opera */ -webkit-animation-name: moveit; -webkit-animation-duration: 2s; animation-name: moveit; animation-duration: 2s; } /* Chrome, Safari, Opera */ @-webkit-keyframes moveit { from {left: 0;} to {left: 50%;} } @keyframes moveit { from {left: 0;} to {left: 50%;} }测试看看‹/›
注意:如果关键帧选择器指定了负百分比值或高于的值100%,则关键帧将被忽略。
下表描述了此规则的参数。
值 | 描述 |
---|---|
必需 -要使CSS有效,需要以下参数。 | |
animation-name | 动画的名称。 |
keyframes-selector | 指定沿动画持续时间的百分比。关键帧规则的关键帧声明块由属性和值组成。 |
@keyframes属性浏览器的兼容性,下表中的数字表示支持该属性的浏览器最低版本号;所有主流浏览器均支持该规则。
|
请参考以下教程:CSS Media Types。