CSS学习（12）过渡与动画

前言

• CSS3中transition和animation的属性分别有哪些
• CSS动画如何实现

CSS3过渡

CSS3新增了过渡属性，可以从一个状态变化到另一个状态时，变化更加地平滑。

在W3C标准中是这样描述transition的，CSS3 的 transition 允许 CSS 的属性值在一定的时间区间内平滑的过渡。这种效果可以在鼠标单击，获得焦点，对元素任何改变中触发，并平滑地以动画效果改变 CSS 的属性值。

先看一个入门示例：

<div></div>

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s;
  -webkit-transition: width 2s, height 2s, background-color 2s;
}

div:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

当鼠标悬停在div上时，div的宽度、高度和背景色会平滑过渡到新的值。

transition属性

transition属性是一个简写属性，用于设置四个过渡属性：

• transition-property：指定过渡的属性名称，默认值为all，表示所有属性。
• transition-duration：指定过渡的持续时间，默认值为0s，表示没有过渡效果。
• transition-timing-function：指定过渡的时间函数，默认值为ease，表示过渡速度先慢后快再慢。
• transition-delay：指定过渡的延迟时间，默认值为0s，表示立即开始过渡。

transition-property属性

transition-property属性用于指定过渡的属性名称，常用的值有：

• all：所有属性
• none：没有属性
• 具体属性：如width、height、background-color等

需要特别说明的是，并不是所有的属性都可以进行过渡，只有属性是具有一个中点值的属性才能够进行过渡效果。因为这样才能通过不停的修改中间值从而实现过渡效果。例如 display:none|block 就没有中间值，所以无法应用过渡。

能够过渡的属性类型有颜色属性、具有长度值或百分比的属性、阴影、变形系列属性，具体支持过渡的属性可以参阅下表：

| 属性 | 描述 | | --- | --- | --- | | background | 背景颜色 | | background-position | 背景位置 | | border-color | 边框颜色 | | border-radius | 边框圆角 | | bottom | 底部位置 | | color | 文字颜色 | | left | 左侧位置 | | letter-spacing | 字母间距 | | line-height | 行高 | | margin | 外边距 | | opacity | 透明度 | | outline | 轮廓 | | padding | 内边距 | | right | 右侧位置 | | text-indent | 首行缩进 | | text-shadow | 文字阴影 | | top | 顶部位置 | | transform | 变形 | | vertical-align | 垂直对齐 | | visibility | 可见性 | | width | 宽度 | | word-spacing | 单词间距 | | z-index | z轴位置 |

transition-duration属性

transition-duration属性用于指定过渡的持续时间，常用的值有：

• s：秒
• ms：毫秒

transition-timing-function属性

transition-timing-function属性用于指定过渡的时间函数，常用的值有：

• ease：默认值，过渡速度先慢后快再慢
• linear：匀速过渡
• ease-in：过渡速度先慢后快
• ease-out：过渡速度先快后慢
• ease-in-out：过渡速度先慢后快再慢
• cubic-bezier(n,n,n,n)：自定义过渡速度

transition-delay

过渡延迟多久后触发，单位是秒或者毫秒，但是值可以是正整数，负整数和0，正整数和0都比较容易理解，主要说下负整数，负整数的计算会从整体过渡时间中做减法运算。

过渡事件

过渡事件包括三个，分别是：

• transitionstart：过渡开始时触发
• transitionend：过渡结束时触发
• transitionrun：过渡运行时触发

transitionrun 在 transition 创建的时候被触发。（或者说在某个 delay 开始的时候）

transitionstart 在动画实际开始的时候被触发。 (或者说在某个 delay 结束的时候)

<div id="app"></div>

#app{
  width: 150px;
  height: 150px;
  background-color: blueviolet;
  transition: all .3s;
}

const oDiv = document.querySelector("#app");

oDiv.onclick = ()=>{
  oDiv.style.width = "400px"
}

oDiv.addEventListener("transitionend",()=>{
  console.log("过渡结束")
})

CSS3动画

在CSS3中新增了一个animation属性，可以制作出类似flash一样的动画出来。

先看一个入门示例：

<div id="app"></div>

#app{
  width: 150px;
  height: 150px;
  background-color: blueviolet;
  animation: test 5s;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes test{
  0% {
    left: 0;
    top: 0;
  }
  25% {
    left: 400px;
    top: 0;
  }
  40% {
    left: 400px;
    top: 200px;
  }
  65% {
    left: 0;
    top: 200px;
  }
  100% {
    left: 0;
    top: 0;
  }
}

在上面的代码示例中，我们声明了一个名为 test 的动画，然后在 div 中运用了这个动画，整个动画的播放时间为 5s。

接下来我们来看一下CSS3中动画的具体细节。

使用 CSS3 的 animation 制作动画包含两个部分：首先是用关键帧声明一个动画，其次是在 animation 调用关键帧声明的动画。

声明动画

使用 @keyframes 关键字来声明一个动画，@keyframes 是一个关键帧动画，它由多个关键帧组成，每个关键帧都定义了动画在某个时间点的样式。

语法：

@keyframes animationname {keyframes-selector {css-styles;}}

值	说明
animationname	必需的。定义animation的名称。
keyframes-selector	必需的。动画持续时间的百分比。合法值：0-100% from (和0%相同) to (和100%相同)注意：  您可以用一个动画keyframes-selectors。
css-styles	必需的。一个或多个合法的CSS样式属性

@keyframes test{
  0% {
    left: 0;
    top: 0;
  }
  25% {
    left: 400px;
    top: 0;
  }
  40% {
    left: 400px;
    top: 200px;
  }
  65% {
    left: 0;
    top: 200px;
  }
  100% {
    left: 0;
    top: 0;
  }
}

在上面的代码中，我们定义了一个名为 test 的动画，这个动画在 0%、25%、40%、65%、100% 的时候分别定义了 div 的位置，从而实现了一个来回移动的动画效果。

调用动画

使用 @keyframes 声明动画后，需要使用 animation 属性来调用关键帧声明的动画。

语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

前四个属性，我想大家应该很熟悉了，这四个属性同时也是transition的四个属性

值	说明
animation-name	必需的。定义animation的名称。
animation-duration	必需的。定义animation的时长。
animation-timing-function	可选的。定义animation的速度曲线。
animation-delay	可选的。定义animation何时开始。
animation-iteration-count	可选的。定义animation的播放次数。
animation-direction	可选的。定义animation是否在每次循环时轮流反向播放。
animation-fill-mode	可选的。定义animation在动画执行前后（动画不播放时）如何应用样式。
animation-play-state	可选的。定义animation是否正在运行或暂停。

animation-iteration-count

animation-iteration-count 属性定义动画播放的次数。

语法：

animation-iteration-count: infinite | number;

值	说明
infinite	动画无限次播放。
number	动画播放的次数。

div {
  animation: test 5s infinite;
}

在上面的代码中，我们定义了一个名为 test 的动画，这个动画在 5 秒内无限次播放。

animation-direction

animation-direction 属性定义动画是否在每次循环时轮流反向播放。

语法：

animation-direction: normal | reverse | alternate | alternate-reverse;

值	说明
normal	正常方向播放。
reverse	反方向播放。
alternate	在奇数次动画时正常播放，在偶数次动画时反方向播放。
alternate-reverse	在奇数次动画时反方向播放，在偶数次动画时正常播放。

div {
  animation: test 5s infinite alternate;
}

在上面的代码中，我们定义了一个名为 test 的动画，这个动画在 5 秒内无限次播放，并且在每次循环时轮流反向播放。

animation-fill-mode

animation-fill-mode 属性定义动画在执行前后如何应用样式。一般用于设置动画播放完毕后的状态

语法：

animation-fill-mode: none | forwards | backwards | both;

值	说明
none	动画不应用任何样式。
forwards	动画结束后，元素将保持动画最后一帧的样式。（最常用）
backwards	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

animation-play-state

animation-play-state 属性定义动画是否正在运行或暂停。 语法：

animation-play-state: running | paused;

值	说明
running	动画正在运行。
paused	动画已暂停。

该属性一般会配合JS一起使用，从而达到对动画播放状态的一个控制。

动画事件

• animationstart：在 CSS 动画开始时触发
• animationend：在 CSS 动画结束时触发
• animationiteration：在 CSS 动画重复播放时触发

总结

• CSS3中transition和animation的属性分别有哪些

transition过渡动画：

• transition-property：指定过渡的CSS属性
• transition-duration：指定过渡所需的完成时间
• transition-timing-function：指定过渡函数
• transition-delay：指定过渡的延迟时间

animation 关键帧动画：

• animation-name：指定要绑定到选择器的关键帧的名称
• animation-duration：动画指定需要多少秒或毫秒完成
• animation-timing-function：设置动画将如何完成一个周期
• animation-delay：设置动画在启动前的延迟间隔
• animation-iteration-count：定义动画的播放次数
• animation-direction：指定是否应该轮流反向播放动画
• animation-fill-mode：规定当动画不播放时(当动画完成时，或当动画有一个延迟未开始播放时)，要应用到元素的样式
• animation-play-state：指定动画是否正在运行或已暂停

• CSS动画如何实现

使用@keyframes规则，定义动画序列，然后使用animation属性将动画应用于元素。