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

过渡

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

示例代码如下：

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

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

transition-property：表示哪个属性需要过渡效果，

可选值有：

all，即元素中所有用长度值表示的属性都能过渡、

具体属性名，如height/width等可以用长度值表示的属性、

none，不过渡任何属性

常见的用长度表示的属性有：width、height、z-index、opacity、颜色、2d/3d变换属性、阴影

.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），并且文字有了阴影

transition-duration：表示过渡持续时间，即一个状态过渡到另一个状态的耗时，单位为ms或s，设置该属性可使过渡效果更平滑；

可选值有：

0 表示无过渡时间（默认值）

s或ms，表示所有过渡属性都按同一个过渡时间

列表，分别对应每个属性的过渡时间

.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;
}

过渡效果会更加柔和～

transition-delay：用于设置动画延迟开始的时间，单位m或ms

.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;
}

transition-timing-function：用于设置过渡的类型，即动画在每个周期的持续时间内如何进行；

可选值可用关键字或贝塞尔函数或steps函数表示：

① cubic-bezier(p1, p2, p3, p4)即贝塞尔函数，可以自定义各参数，且 p1 和 p3 的值必须在 0 到 1 的范围内，可通过cubic-bezier.com网站自行定义贝塞尔函数~

② 关键字如下

ease即cubic-bezier(0.25, 0.1, 0.25, 1.0)，表示过渡在中间加速，在结尾减速（默认值）；

        linear即cubic-bezier(0.0, 0.0, 1.0, 1.0)，表示过渡以匀速（线性）运动；

ease-in即cubic-bezier(0.42, 0, 1.0, 1.0)，表示过渡一开始较慢，逐渐加速直至完成

        ease-out即cubic-bezier(0, 0, 0.58, 1.0)，表示过渡一开始较快，逐渐减速直至完成

ease-in-out即cubic-bezier(0.42, 0, 0.58, 1.0)，表示过渡一开始较慢，随后加速，最后再次减速直至完成；

③ steps(n, <jumpterm>)函数

其中n表示过渡步数，即按照 n 个定格在过渡中显示效果，每个定格过渡时间相同；

如果 n 为 5，则有 5 个步骤。动画是否在 0%、20%、40%、60% 和 80% 处或 20%、40%、60%、80% 和 100% 处暂停，或者在动画的 0% 和 100% 之间设置 5 个定格，又或是在包括 0% 和 100% 的情况下设置 5 个定格（在 0%、25%、50%、75% 和 100% 处）取决于使用以下jumpterm（跳跃项）之一

        jumpterm定义过渡开始的位置，有：

                jump-start/start表示第一个跳跃发生在过渡开始时、

                jump-end/end表示最后一个跳跃在过渡结束时、

                jump-none表示跳跃在过渡开始或结束时均不发生、

                jump-both表示跳跃在过渡开始或结束时都发生；

transition-timing-function: step-start 相当于steps(1, jump-start)，即无过渡时间，直接显示效果；

transition-timing-function: step-end 相当于steps(1, jump-end)，即考虑过渡时间，但无过渡效果，过渡时间一到瞬间到达终点~

.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;
}

过渡复合属性：通常情况下，会利用复合属性来定义过渡效果，使用关键词transition将上述属性包含在内；

复合属性仅对过渡时间与延迟时间有顺序要求，若有一个时间，则表示为过渡时间，若为两个时间，第一个为duration，第二个为dalay；其它属性无顺序要求

.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中可以通过定义一些关键帧实现动画效果；

@keyframe用于定义关键帧，可以在关键帧内定义代码片段实现动画效果（CSS会自动根据关键帧将整个动画连贯起来）

每个@keyframe 规则包含多个关键帧，可以通过from/to关键帧实现，也可以通过百分比实现

语法如下：

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

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

其中slidein表示关键帧名称，from关键字定义动画开始时（第一帧画面）的效果，to关键字表示动画结束时（最后一帧画面）的效果~

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

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

from即为0%处，to即为100%处的效果，当然也可以将百分比与from、to关键字混合使用~

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

annimation-name 用于定义对应动画名，与关键帧@keyframes后面的属性名一一对应；

annimation-duration 用于定义动画持续时间，单位s或ms；

annimation-delay 用于定义动画延迟时间，单位s或ms

annimation-timing-function 用于定义动画类型，可选项与上述过渡一样，不再赘述

<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-iteration-count改变播放次数，参数为正整数或infinite（无限播放）

animation-iteration-count: infinite /* 无限播放 */

一般动画交替播放时默认再从起始位置处播放，可通过设置animation-derection改变交替播放方向，可选值为：

        normal：动画交替播放时，将重置为起始状态并重新开始；

        reverse：动画交替播放时，动画将重置为此次动画的结束状态并重新开始，并且animation-timing-function也会反转，如ease-in会变成ease-out

alternate：动画在每个循环中正反交替播放，第一次迭代是正向播放。确定循环是奇数还是偶数的计数从 1 开始。

        alternate-reverse：动画在每个循环中正反交替播放，第一次迭代是反向播放。确定循环是奇数还是偶数的计数从 1 开始。

animation-direction: alternate-reverse;

一般动画结束时，默认停在动画开始的状态，可以通过设置animation-fill-mode改变动画之外的状态，可选值为：

forwards: 设置对象状态为动画结束时的状态；

backwards：设置对象状态为动画开始时的状态；

 animation-fill-mode: backwards;

可以通过设置animation-play-state设置动画的播放状态（停止、播放），可选值为：

running: 表示运行动画；

paused：表示暂停动画

恢复暂停的动画将从暂停时停止的位置开始播放，而不是从动画序列的开头重新开始播放

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

animation：表示动画的复合属性，和过渡transition一样，上述所有参数（除animation-play-state外）都可以任意搭配使用，若只设置一个时间，则为动画的过渡时间，设置两个时间则分别为过渡时间与延迟时间；

animation-play-state一般与js配合使用，控制动画的暂停与运行状态