CSS3 animation 属性 – 源码巴士

animation

animation是css3中是一个属性，用来控制图片的动画的。

@keyframes 关键帧

@keyframes name{
   0%{开始状态}
   100%{结束状态}}
}
@keyframes name{
   from{开始状态}
   to{结束状态}}
}

.box{
  animation: run 5s infinite;
}
 
@keyframes run {
  0% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}
@keyframes run {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}

animation的属性

animation-name：声明要操纵的@keyframes规则的名称。
animation-duration：动画完成一个周期所需的时间。
animation-timing-function：建立预设的加速曲线，例如缓动或线性。
animation-delay：加载元素到动画序列开始之间的时间。
animation-direction：设置循环后动画的方向。其默认值在每个周期重置。
animation-iteration-count：应该执行动画的次数。
animation-fill-mode：设置在动画之前/之后应用的值。例如，您可以将动画的最后状态设置为保留在屏幕上，或者可以将其设置为切换回动画开始之前的状态。
animation-play-state：暂停/播放动画。

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body,
    html {
        height: 100%;
    }
    body {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .box {
        height: 250px;
        width: 250px;
        margin: 0 auto;
        background-color: red;
        animation-name: run;
        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 run {
        0% {
            transform: scale(.3);
            background-color: red;
            border-radius: 100%;
        }

        50% {
            background-color: green;
        }

        100% {
            transform: scale(1.5);
            background-color: blue;
        }
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>

原文链接：https://blog.csdn.net/zyf_1998/article/details/105780197