CSS查缺补漏之《过渡效果与动画效果》

过渡

过渡效果使用transition属性表示，设置在需要过渡效果的元素上，它可以在让元素从一种样式平滑过渡为另一种样式。下面会依次介绍其属性值~

示例代码如下：

<div class="box">
    世界你好
</div>

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    margin: 0 auto;
    margin-top: 100px;
}

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    margin: 0 auto;
    margin-top: 100px;
    /* 设置过渡属性为width与text-shadow */
    transition-property: width,text-shadow;
}
.box:hover {
    width: 300px;
    text-shadow: 20px 20px 2px green;
}

上述代码可以实现在鼠标hover到box时，box的宽度变大（变为300px），并且文字有了阴影 

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    margin: 0 auto;
    margin-top: 100px;
    /* 设置过渡属性为width与text-shadow */
    transition-property: width,text-shadow;
    /* 为width设置过渡时间1.5s 为text-shadow设置过渡时间为2s */
    transition-duration: 1.5s,2s;
}
.box:hover {
    width: 300px;
    text-shadow: 20px 20px 2px green;
}

过渡效果会更加柔和～  

.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
  margin: 0 auto;
  margin-top: 100px;
  /* 设置过渡属性为width与text-shadow */
  transition-property: width,text-shadow;
  /* 为width设置过渡时间1.5s 为text-shadow设置过渡时间为2s */
  transition-duration: 1.5s,2s;
  /* 在触发动作后间隔一秒开始过渡 */
  transition-delay: 1s;
}

.box:hover {
  width: 300px;
  text-shadow: 20px 20px 2px green;
}

.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
  margin: 0 auto;
  margin-top: 100px;
  /* 设置过渡属性为width与text-shadow */
  transition-property: width,text-shadow;
  /* 为width设置过渡时间1.5s 为text-shadow设置过渡时间为2s */
  transition-duration: 1s,1s;
  /* 过渡效果分五步，且在过渡开始和结束时都跳跃 */
  transition-timing-function: steps(5, jump-both)
}
.box:hover {
  width: 300px;
  text-shadow: 20px 20px 2px green;
}

.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
  margin: 0 auto;
  margin-top: 100px;
 /* 第一个时间表示过渡时间为1s 第二个时间表示延迟时间为0.5s */
 /* 表示box类中的所有可以过渡属性在0.5s延迟后使用ease方式在1s内完成过渡 */
  transition: all 1s 0.5s ease;
}
.box:hover {
  width: 300px;
  text-shadow: 20px 20px 2px green;
}

动画

一幅画面一幅画面（帧）的播放连起来就成了视频，CSS3中可以通过定义一些关键帧实现动画效果；

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

或者使用百分比表示关键帧位置：

@keyframes identifier {
  /* 第一帧画面的效果 */
  0% { top: 0; left: 0; } 
  /* 在动画的30%处画面的效果 */
  30% { top: 50px; }
  /* 在动画的68%与72%处画面的效果 */
  68%, 72% { left: 50px; }
  /* 最后一帧画面的效果 */
  100% { top: 100px; left: 100%; }
}

定义完关键帧后，需要在使用动画的元素上定义动画名、动画持续时间、动画延迟时间等，

<div class="box">
  世界你好
</div>

@keyframes identifier {
  /* 第一帧画面的效果 */
  0% { 
    border-radius: 20px;
    background-color: blue;
  } 
  /* 在动画的50%处画面的效果 */
  50% { 
    border-radius: 40px;
    background-color: orange;
   }
  /* 最后一帧画面的效果 */
  100% { 
    border-radius: 50%;
    background-color: rgb(0, 208, 255);
  }
}
.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
  margin: 0 auto;
  margin-top: 100px;
  animation-name: identifier;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-timing-function: ease-in;
}

animation-direction: alternate-reverse;

 animation-fill-mode: backwards;

.box:hover {
  /* 鼠标划过box类时动画停止 */
  animation-play-state: paused;
}