主要用到的三个单词（transition过渡）（animation执行动画）（keyframes动画体）

Transition的应用

//Css
<style>
.animation1{
  width: 70px;
  height: 70px;
  background: #981928;
}
.animation1:hover{
  width: 140px;
  height: 140px;
  background: #874590;
}
</style>

//Dom
<div class="animation1"></div>

可以看到这个时候.animation1是瞬时变化的，这个时候给它加一个过渡效果transition。

//Css
<style>
.animation1{
  width: 70px;
  height: 70px;
  background: #981928;
  transition: all 2s;
}
.animation1:hover{
  width: 140px;
  height: 140px;
  background: #874590;
}
</style>

//Dom
<div class="animation1"></div>

这里就可以看到2s内渐变到.animation1:hover的效果,这里是双向的

transition的属性语法 ( 只对 block 级元素生效！)

transition: all 2s; 表示所有的变化都有渐变效果
transition: all 2s .5s; 表示延迟0.5s后执行渐变
transition: width 2s .5s, height 1s ease-in-out; 表示指定属性执行相应的渐变
transition: all 2s ease-in-out .5s; ease-in-out对应的变化曲线，对应属性名transition-timing-function

总结来说：transition有四个属性；
transition:all 2s ease-in-out .5s;(值1；值2；值3；值4；)
值1：（transition-property）过渡属性名称
值2：（transition-duration）过渡时间
值3：（transition-timing-function）过渡动画速度曲线
值4：（transition-delay）过渡动画开始前的延迟时间
运用transition这四个属性就可以实现简单的动画效果;这里要注意的是实现淡入、淡出与隐藏、显示无关；应该是给opacity属性；

animation和keyframes的应用

//Css
<style>
  .animation1{
    width: 140px;
    height: 140px;
    background: #e64e60;
  }
  .animation1:hover{
    animation: mcAnimation 1s;
  }
  @keyframes mcAnimation {
    from { background: #006eff }
    50%{ background: #ee00ff }
    to {background: #f75200}
  }
</style>

//Dom
  <div class="animation1"></div>

以上代码表示，当鼠标移到.animation上面的时候背景颜色的变化，顺序为from-50%-to;
form表示开始帧，to表示结束帧，中间可以插入百分比；当然也可以写0%到100%

animation的属性语法

简写：
animation: mcAnimation 1s 1s linear 3 forwards normal;
拆分写：
animation-name: mcAnimation ; //执行动画名称
animation-delay: 1s; //动画前等待时间
animation-duration: 1s; //动画一个周期的时间
animation-timing-function: linear; //动画速度变化方式
animation-iteration-count: 3; //执行次数
animation-fill-mode:forwards; //结束时的状态
animation-direction: normal; //动画的方向（如图）

keyframes的语法

@keyframes 动画名称{ ... } //这里的动画名称就是我们上面说的animation-name
keyframes的写法比较自由,如
@keyframes mcAnimation{ from { width: 100px } to { width: 200px } } 或
@keyframes mcAnimation{ from { width: 100px } 50% { width: 150px } to { width: 200px } } 或
@keyframes mcAnimation{ 0% { width: 100px } 50% { width: 150px } 100% { width: 200px } } 或
@keyframes mcAnimation{ from，to { width: 100px } 50% { width: 200px } } 都是可以的

animation-play-state的应用

//Css
<style>
  .animation1{
    width: 140px;
    height: 140px;
    background: #e64e60;
    animation: 1s mcAnimation linear infinite;
    animation-play-state: paused;
  }
  .animation1:hover{
    animation-play-state: running;
  }
  @keyframes mcAnimation {
    from { background: #006eff }
    to {
      background: #f75200;
      transform: rotate(1turn);
    }
    50%{ background: #ee00ff }
  }
</style>

//Dom
  <div class="animation1"></div>

以上代码表示，当鼠标移动到.animation的时候开始动画，当鼠标移开的时候保留当前状态停止动画

（完）

Css动画的基本用法