码迷,mamicode.com
首页 > Web开发 > 详细

CSS3之animation属性

时间:2019-10-08 16:08:38      阅读:306      评论:0      收藏:0      [点我收藏+]

标签:msi   逗号   重置   one   ems   aci   spl   jni   默认值   

CSS中的animation属性可用于为许多其他CSS属性设置动画,例如颜色,背景色,高度或宽度。 每个动画都需要使用@keyframes这种at-rule语句定义,然后使用animation属性来调用它,如下所示:

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

  技术图片

<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title></title>
    <style>
        .element {
            width: 100%;
            height: 100%;
            animation: pulse 5s infinite;
        }

        @keyframes pulse {
            0% {
                background-color: #001F3F;
            }

            100% {
                background-color: #FF4136;
            }
        }
        html,
        body {
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="element"></div>
</body>
</html>

  

每个@keyframes的 at-rule CSS语句规则都定义了在动画过程中的特定时刻应该发生的情况。 例如,0%是动画的开始,而100%是动画的结束。可以通过简写animation属性或它的八个子属性控制这些关键帧,以更好地控制应该如何操纵这些关键帧。

子属性

animation-name:声明要操纵的@keyframes规则的名称。

animation-duration:动画完成一个周期所需的时间。

animation-timing-function:建立预设的加速曲线,例如缓动或线性。

animation-delay:加载元素到动画序列开始之间的时间。

animation-direction:设置循环后动画的方向。 其默认值在每个周期重置。

animation-iteration-count:应该执行动画的次数。

animation-fill-mode:设置在动画之前/之后应用的值。

例如,您可以将动画的最后状态设置为保留在屏幕上,或者可以将其设置为切换回动画开始之前的状态。

animation-play-state:暂停/播放动画。

可以如下面所示使用这些子属性:

@keyframes stretch {
  /* 这里声明动画动作 */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/* 等同于*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

  技术图片

<!DOCTYPE html>
<html>

<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title></title>
    <style>
        .element {
            height: 250px;
            width: 250px;
            margin: 0 auto;
            background-color: red;
            animation-name: stretch;
            animation-duration: 1.5s;
            animation-timing-function: ease-out;
            animation-delay: 0;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            animation-fill-mode: none;
            animation-play-state: running;
        }

        @keyframes stretch {
            0% {
                transform: scale(.3);
                background-color: red;
                border-radius: 100%;
            }

            50% {
                background-color: orange;
            }

            100% {
                transform: scale(1.5);
                background-color: yellow;
            }
        }

        body,
        html {
            height: 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="element"></div>
</body>

</html>

  

以下是这些子属性中每个属性可以采用的值的完整列表:

 
animation-timing-function
ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))
animation-duration
Xs or Xms
animation-delay
Xs or Xms
animation-iteration-count
X
animation-fill-mode
forwards, backwards, both, none
animation-direction
normal, alternate
animation-play-state
paused, running, running
 

多个步骤

如果动画具有相同的开始和结束属性,则在@keyframes中用逗号分隔0%和100%值很有用:

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}

  

多个动画

您也可以用逗号分隔值,以在选择器上声明多个动画。 在下面的示例中,我们想在@keyframe中更改圆的颜色,同时还要将其与另一边左右轻轻一碰。

.element {
  animation: 
    pulse 3s ease infinite alternate, 
    nudge 5s linear infinite alternate;
}

  技术图片

<!DOCTYPE html>
<html>

<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title></title>
    <style>
        .element {
            height: 400px;
            width: 400px;
            background-color: red;
            animation:
                pulse 3s ease infinite alternate,
                nudge 5s linear infinite alternate;
            border-radius: 100%;
        }

        @keyframes pulse {

            0%,
            100% {
                background-color: red;
            }

            50% {
                background-color: orange;
            }
        }

        @keyframes nudge {

            0%,
            100% {
                transform: translate(0, 0);
            }

            50% {
                transform: translate(150px, 0);
            }

            80% {
                transform: translate(-150px, 0);
            }
        }


        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="element"></div>
</body>

</html>

  

性能

对大多数属性进行动画处理是性能方面的考虑,因此在对任何属性进行动画处理之前,我们应谨慎行事。 但是,可以安全地对某些组合进行动画处理:

transform: translate()

transform: scale()

transform: rotate()

opacity

哪些属性可以设置动画?

MDN有一个可以设置动画的CSS属性列表。 可设置动画的属性倾向于颜色和数字。 不可动画属性的一个示例是背景图像。

CSS3之animation属性

标签:msi   逗号   重置   one   ems   aci   spl   jni   默认值   

原文地址:https://www.cnblogs.com/f6056/p/11635785.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!