Part1：Transition

CSS动画主要由两个属性来实现：

Transition
Animation + Keyframes

transition的意思就是当某个元素的某个属性发生变化的时候，transition会帮你添加中间帧，让这个变化不那么生硬，比如下面这样一个简单的box的hover动画,如果不添加这一行transition代码就会生硬的直接从方变成圆。

基本语法

.element {
  transition: [property] [duration] [ease] [delay];
                变化属性    变化时间   曲线   延时
}

比如.red { transition: opacity 300ms ease-in-out 1s;}意思就是transition会监测这个class名为red的元素，如果这个元素的opacity发生了变化，那么transition会帮你把这个变化变成一个持续时间300ms的动画，这个动画的速度曲线是ease-in-out，并且会有1s的延迟，也就变化的1s后开始执行动画。

理解了transition是什么之后，现在有两个问题：

有哪些属性可以transition？
怎么触发transition？

问题一：有哪些属性可以transition？

其实很简单，概括的说，只有两类属性是适合（并且可以）transition的：transform和opacity，其中transform又分为三种类型

Transform属性

translate ，位移。
比如transform: translateY(15px) 就是在y轴方向往下移动15px。
scale，放大缩小
比如transform: scale(1.2) 就是讲元素放大1.2倍
rotation，旋转
比如 transform: rotate(5deg) 元素顺时针旋转15度

问题2：如何触发一个transition？

常见方法也只有两种：

hover之类的伪类
通过class的改变

🌰1 通过hover伪类触发动画

<div class="trigger">
  <div class="box"></div>
</div>

.trigger {
  width: 200px;
  height: 200px;
  background: #ddd;
  border: 20px solid #999;
}

.box {
  display: inline-block;
  background: pink;
  width: 200px;
  height: 200px;
  transition: transform 300ms ease-in-out;
  pointer-events: none;
}

.trigger:hover .box {
  transform: translate(200px, 150px) rotate(20deg);
}

transition2.gif

transition属性总是待在会发生变化的元素里等待某个属性变化的来临。什么时候来临呢？这就需要一个trigger的时机，在上面这个例子中就是当box的父元素.trigger:hover的时候。

注意其中 pointer-events这个属性，如果不添加这一个属性，当hover box的时候，也会触发这个transform。

🌰🌰 2 通过添加class触发动画

添加一点js

$('.trigger').on('click',function(){
  $(this).toggleClass('clicked');
});

再改变一下css

.trigger.clicked .box {
  transform: translate(200px, 150px) rotate(20deg);
}

这样就是通过改变class来触发transition的动画，当.trigger被点击的时候，给.box一个class：clicked，这个新的class会让box的transform属性发生变化，从而触发动画。

Part2：animation

学会Animation能够写出比单纯的transition炫酷的多的动画效果，要学习animation前先要了解keyframes的写法，这两个属性必须要成对使用才有效果。

1 keyframes

语法

@keyframes [name] {
  from {
    [styles];
       }
  to {
    [styles];
     }
}

keyframes不需要任何选择器。name可以随便起。from后面的大括号描述某个动画开始是怎么样的，to后面描述结束是怎么样的。
比如

@keyframes myframes {
    from {
        height: 200px;
        background: orange;
    }
    to {
        height: 480px;
        background: pink;
        }
}

更高级点的写法是把from和to换成0%和100%

@keyframes myframes {
0% {
    height: 200px
    }
100% { 
    height: 600px
    background: orange
    } 
}

这样做的好处是，你可以尽情添加更多的keyframe百分比，描述更细致的动画效果,甚至不需要按照0-100的顺序来写，比如下面的写法也是可以的：

@keyframes myframes {
  0% {
    height: 200px
          }
  30%, 100% {
    width: 400px
          }
  70% {
    height: 600px
    background: orange
          }
    }

2 Animation

有了keyframes，就可以在animation中使用它们来给元素添加动画。

2.1 语法

.element {
    animation: [name][duration][timeing-function][delay][iteration-count][direction][fill-mode][play-state];
    }

animation是需要放在css选择器中的，属性中的第一个name就是需要跟keyframes的name相呼应的。比如下面的缩写方式：

 .element {
    animation: myframes 2s ease-in 0s infinite normal forwards paused;
    }

2.2 animation属性详解

要彻底掌握animation，需要逐项弄清楚这些属性究竟是什么意思：

  animation-name: myframes 
  animation-duration: 2s 
  animation-delay: 0s
  animation-timeing-function: ease-in-out  
  animation-iteration-count: infinite
  animation-direaction: normal
  animation-fill-mode: forwards
  animation-play-state: running

animation-delay 是我们需要等多久能看到动画开始，而不是每次动画之间的间隔。如果想要控制每次动画的间隔，需要写在keyframe的百分比中间。
animation-direction可以是正常的normal，也可以是reverse，就是倒着来从100%到0%，可以配合animation-iteration-count比如count：3，就倒着执行3次。还可以是alternate，正着1次，倒着1次，正着1次，这样算3次。
animation-fill-mode 非常有用！它会控制动画结束之后这个元素的停止状态。normal就是最正常的反回最初的状态，而forwards则会让元素停在动画结束的最后1帧的状态。我经常使用fowards这个参数让元素停止在动画结束的状态。
animation-play-state 可以是running或者是paused，paused可以在任何时间点暂停动画，配合js使用。

2.3 如何触发animation动画

hover伪类
class改变
增加新元素

2.4 示例应用

notify.gif

@keyframes note
    0%
      opacity: 0
      transform: scale(0.1) rotate(30deg) translateY(50px) rotateX(90deg)
  50%
      transform: rotate(-10deg) rotateX(-2deg)
      opacity: 1
  70%
      transform: rotate(3deg)
  100%
      transform: scale(1)

先将通知元素隐藏，display: none。当元素被hover的时候，display: flex(或者block，这里用flex是因为通知元素内部的布局需要)，并且执行 animation: note 800ms ease-in-out forwards , fowards是为了让动画执行完停止在最后一帧而不是消失，note就是自定义的keyframes。

作者：LesliePeng
链接：https://www.jianshu.com/p/523b5ff7371d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

来源：https://www.cnblogs.com/blueball/p/12402762.html

标签

transform

transition

animation

动画

css