@keyframes属性解释和用法

更新时间:2021-11-02 来源:黑马程序员浏览量:

CSS3除了支持渐变、过渡和转换特效外，还可以实现强大的动画效果。在CSS3中，使用animation属性可以定义复杂的动画。

@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属性。

animation-name属性

animation-name属性用于定义要应用的动画名称，为@keyframes 动画规定名称。其基本语法格式如下。

animation-name: keyframename | none;

在上述语法中，animation-name属性初始值为none，适用于所有块元素和行内元素。keyframename参数用于规定需要绑定到选择器的keyframe的名称，如果值为none，则表示不应用任何动画，通常用于覆盖或者取消动画。

animation-duration属性

animation-duration属性用于定义整个动画效果完成所需要的时间，以秒或毫秒计，其基本语法格式如下。

animation-duration: time;

在上述语法中，animation-duration属性初始值为0，适用于所有块元素和行内元素。time参数是以秒(s)或者毫秒(ms)为单位的时间，默认值为0，表示没有任何动画效果。当值为负数时，则被视为0。

下面通过一个案例来演示animation-name及animation-duration属性的用法，如下所示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>黑马程序员web前端开发课程 http://web.itheima.com</title> 
    <style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        position:relative;
        animation:mymove 5s infinite;
        -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
    }

    @keyframes mymove
    {
        0%   {top:0px;}
        25%  {top:200px;}
        75%  {top:50px}
        100% {top:100px;}
    }

    @-webkit-keyframes mymove /* Safari and Chrome */
    {
        0%   {top:0px;}
        25%  {top:200px;}
        75%  {top:50px}
        100% {top:100px;}
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在上面案例中，分别使用animation-name属性定义要应用的动画名称，使用animation-duration属性定义整个动画效果完成所需要的时间。另外，使用form和to函数指定当前关键帧要应用动画过程中的位置。

动画开始时的效果如下图所示。

1635845646964_CSS动画.gif