一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第22天，点击查看活动详情。

前言

animation是css3推出的实现动画的属性，虽然经常使用，但是一般都是使用它的简写属性。animation是
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

这些属性的简写。

这些属性认识的不多。今天就来学习下。

animation属性详解

animation-name

动画名称。这个动画名称和@keyframes后的名称要一样，这样@keyframes定义的动画效果就能应用在使用了animation-name的dom元素身上。

animation-duration

动画的时长。要跟单位，可以是秒或者毫秒。默认是0，代表动画时长为0，也就是没有动画。

animation-timing-function

动画完成的速度。有以下值：

ease 先慢速，再加速，最后慢速结束。这个是默认值。
linear 全程动画的速度一样。
ease-in 动画以慢速开始
ease-out 动画以慢速结束
ease-in-out 动画以慢速开始，慢速结束。

animation-delay

动画延时执行的时长。要跟单位，可以是秒或者毫秒。比如1s,延时1s执行。默认值是0，立即执行。

animation-delay也可以是负数，负数会跳过相应的正数的动画时长。比如-2s，会跳过前面的2s动画。

animation-iteration-count

动画执行多少次数后才结束。比如3,动画会执行3次后结束。默认值是1，执行1次。

如果不想结束，可以使用infinte。代表动画一直循环执行。

animation-direction

动画执行的方向。

有以下值：

normal：代表正常方向。这个是默认值。
reverse：代表动画反向执行。
alternate：代表动画在奇数正向执行（1，3，5，7，。。。），在偶数反向执行（2，4，6，8，。。。）

alternate-reverse：和alternate相反，动画在奇数反向执行（1，3，5，7，。。。），在偶数正向执行（2，4，6，8，。。。）

animation-fill-mode

当动画运行结束后，或者动画延迟执行时候，应用的样式。

有以下值：

none：默认值。不会应用任何样式。
forwards：动画结束时，会应用@keyframes最后定义的动画，比如to,100%。
backwards：仅限动画使用延时（animation-delay）才有效果，会在延时一开始的时候应用@keyframes最开始定义的动画，比如form,0%。
both：同时作用forwards和backwards。

animation-play-state

指定动画是否暂停，还是继续执行。 paused暂停动画。running 继续执行动画。

@keyframes

这个是定义动画的css过渡效果。可以通过百分比来定义动画过渡的过程，也有关键字（from, to）等同于0%,100%。后面跟动画的名称以及动画的样式。

// 写法1
@keyframes animation-name {
  from {
    transform: translate(0) scale(1);
  }

  to {
    transform: translate(100px) scale(1.1);
  }
}

// 写法2
@keyframes animation-name {
  from {
    transform: translate(0) scale(1);
  }

  to {
    transform: translate(100px) scale(1.1);
  }
}

例子

animation会在延时阶段边框变成绿色，然后动画开始，向右移动，自身并扩大1.5倍，边框变成黄色，然后再向左移动回去，变回自身大小，最后边框变成红色。

    .animation {
      margin: 100px;
      width: 100px;
      height: 100px;
      border: 1px solid red;
      /* animation: name duration timing-function delay iteration-count direction fill-mode; */
      animation: animation-name 1s ease 2s 2 alternate backwards;
    }

    @keyframes move {
      from {
        transform: translate(0) scale(1);
        border-color: green;
      }

      to {
        transform: translate(100px) scale(1.5);
        border-color: yellow;
      }
    }
    <div class="animation"></div>

总结

以上就是我对animation动画的总结过程。

学习下css3的animation属性

前言