CSS | 开始你的第一个动画-一一网

这是我参与更文挑战的第17天，活动详情查看更文挑战

主要对动画做了一个入门的介绍，如果是初学者可以通过这篇文章快速了动画，同时也可以当做一个开发指南，在忘记动画的某些用法的时，作为参考。

创建一个动画

使用@keyframes规则定义动画，这个规则主要作用是

设置动画的名称
设置动画的关键帧规则

首先来创建一个名为 myfirst 的动画

@keyframes myfirst {
  /*关键帧定义在这里面*/
}
复制代码

在动画中，关键帧是动作发生变化的点,关键帧规则用于在动画循环中的特定点设置属性值。

一个动画至少需要两个关键帧：

from关键帧，它是我们动画的开始状态，
to帧，它是它的结束状态。

在每个单独的关键帧块中，我们可以定义要设置动画的属性：

@keyframes myfirst{
    from {
      background: red;
    }
    to {
       background: blue;
    }
}
复制代码

此段代码的是意思是，将我们的对象从红色变成了蓝色。

不过，该keyframes规则仅定义了一个动画。还需要把它绑定到一个选择器，否则动画不会有任何效果。

例：把 “myfirst” 动画捆绑到 div 元素，时长：2 秒：

div
{
    animation: myfirst 2s;
}
复制代码

在这里，我们使用animation属性来设置动画名称和持续时间。为了播放动画，我们需要写上@keyframes规则的名称（在本例中为myfirst）和持续时间。其他属性是可选的。

创建多个规则动画：

@keyframes pulse {
    from {
        transform: scale(0.5);
    }       
    to {
        transform: scale(1);
    }
}

@keyframes fade {
    from {
        opacity: .8;
    }
    to {
        opacity: 1;
    }
}
复制代码

.pulse-and-fade {
    animation: pulse 500ms, fade 500ms;
}
复制代码

此段代码的是意思是,将我们的对象从其大小的一半缩放到其完整大小，并将不透明度从 80% 更改为 100%。

注：上面的也可以不分成多规则，等同于下面这段代码

@keyframes pulse {
    from {
        transform: scale(0.5);
        opacity: .8;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}
.pulse {
    animation: pulse 500ms;
}
复制代码

from…to 和 %

关键帧出了用from(0%)…to(100%),还可以使用百分比关键帧创建更复杂的动画，还可以互相组合

@keyframes demo1{
    0% {
      background: red;
    }
    50% {
       background: blue;
    }
    100% {
       background: green;
    }
}
复制代码

@keyframes demo2{
    from {
      background: red;
    }
    50% {
       background: blue;
    }
     to {
       background: green;
    }
}
复制代码

动画属性列表

语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
复制代码

animation-name

@keyframes规则名称

animation-duration

一个动画的周期应该持续多久(负时间值无效)

初始值：0s （没有动画发生）

单位：秒 ( s) 或毫秒 ( ms )

animation-timing-function

性规定动画的速度曲线。

初始值：ease

可选值：

ease ：从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear ：从开始到结束的速度相同的动画
ease-in ：慢速开始的动画
ease-out ：慢速结束的动画
ease-in-out ：指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) ：运行您在三次贝塞尔函数中定义自己的值

animation-delay

执行动画前等待多长时间(负时间值有效)

初始值：0s （立即执行）

单位：秒 ( s) 或毫秒 ( ms )

animation-iteration-count

动画重复多少次

初始值：1

注：无限次，可以用infinite关键字

.pulse {
    animation-name: pulse;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
}
/*等同于*/
.pulse {
    animation: pulse 500ms infinite;
}
复制代码