首页技术文章正文

@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

分享到:
在线咨询 我要报名
和我们在线交谈!