CSS3 @keyframes的用法介绍

使用动画之前必须先定义关键帧，一个关键帧表示动画过程中的一个状态。在CSS3中，@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐变为新样式的动画效果。@keyframes属性的语法格式如下。

@keyframes animationname {
    keyframes-selector{css-styles;}
}

在上面的语法格式中，@keyframes属性包含的参数具体含义如下。

● animationname：表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。

● keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。

● css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。

例如，使用@keyframes属性可以定义一个淡入动画，示例代码如下。

@keyframes 'appear'{
    0%{opacity: 0;}　　　/*动画开始时的状态，完全透明*/
    100%{opacity: 1;}　　/*动画结束时的状态，完全不透明*/
}

 

上述代码创建了一个名为apper的动画，该动画在开始时opacity为0(透明)，动画结束时opacity为1(不透明)。该动画效果还可以使用等效代码来实现，具体如下。

@keyframes 'appear'{
    from{opacity: 0;}　　　/*动画开始时的状态，完全透明*/
    to{opacity: 1;}　　　　/*动画结束时的状态，完全不透明*/
}

 

另外，如果需要创建一个淡入淡出的动画效果，可以通过如下代码实现，具体如下。

@keyframes 'appeardisappear'{
    from,to{opacity: 0;}　　/*动画开始和结束时的状态，完全透明*/
    20%,80%{opacity: 1;}　/*动画的中间状态，完全不透明*/
}

　　

在上述代码中，为了实现淡入淡出的效果，需要定义动画开始和结束时元素不可见，然后渐渐淡出，在动画的20%处变得可见，然后动画效果持续到80%处，再慢慢淡出。

注意：

Internet Explorer 9，以及更早的版本，不支持@keyframe规则或animation属性。InternetExplorer 10、Firefox 以及Opera 支持@keyframes规则和animation属性。

文章转自：黑马程序员web前端开发