CSS3-transition过渡动画详解

基本了解

• css中实现动画有两种方式：transition过渡动画、 animation自定义动画。

• 本文主要讲解transition过渡动画的使用。

• 在不使用transition时，若通过用户的交互直接改变css样式属性，呈现的形式是立刻转变，但有时我们希望这个变化是有过渡效果的，这时就可应用transition过渡动画了。

我们先来简单了解下transition族属性：

下面详细介绍各个属性?

transition-property

transition-property : 用于指定使用过渡效果的css属性，默认值为all。

案例展示：

<style&gt
  .box {
    width: 50px;
    height: 50px;
    background-color: pink;
    transition-property: all;
    transition-duration: 0.8s;
  }
  .box::after {
    content: "★";
    color: rgba(255, 255, 255, 0.8);
    width: inherit;
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.8s;
  }
  .box:hover {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: skyblue;
  }
  .box:hover::after {
    content: "♥";
    font-size: 100px;
  }
</style&gt
<body&gt
  <div class="box"&gt</div&gt
</body&gt

为了使动画有过渡效果，必须设置过渡时间，这也是过渡动画的基本要素，所以上述具有动画的元素都设置了transition-duration。

注意点

transition-property的默认值

• 上述案例在触发hover时,我只改变了文字和大小，可实际效果却影响了文字的布局（文字移动），产生的原因就是忽略了transition-property的默认值。

• 我们已经多次提及了transition-property的默认值，上述代码给.box的伪类::after只添加了一个transition-duration，而没有设置transition-property,所以会应用其默认值all，也就是说：所有能够被transition支持的属性都会有过渡效果。

我们来具体分析一下，为什么会产生变动：

• .box伪类::after的宽高是继承父级的，由于在触发hover时，父级宽高发生改变，所以伪类宽高也会跟随改变，从而影响了布局。

• 为了更清晰的看到原因，我们可以为伪类添加一个背景

.box::after {
  ……
  background-color: rgba(0, 0, 0, 0.3); 
}

如果我们只想让文字大小产生过渡效果，只需要明确指定transition-property:font-size即可。

transition不能支持的过渡

​ 上述动画中可发现，文字内容是突变的，当然还有其他transition不支持过渡的选项，也都很好理解:

• z-index
• display

transition-duration

transition-duration定义动画的过渡时间，默认值为0s,也就是说，如果不设置该属性，默认是没有过渡效果的。

transition-timing-function

定义动画事件函数，animation族属性中也有该属性，该属性可以改变动画的执行速率以及轨迹。

其值对应animation-timing-function

案例展示：

.box {
  width: 50px;
  height: 50px;
  background-color: pink;
  transition-property: all;
  transition-duration: 0.8s;
  transition-timing-function: cubic-bezier(0.49, 1.59, 0.46, -0.21);
}
.box:hover {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: rotate(360deg);
  background-color: skyblue;
}

transition-delay

transition-delay用于设置动画延迟时间，单位为s

下例动画：触发hover于1s后执行，离开元素后也会延时1s再过渡

<样式>
  main {
    width: 300px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: perspective(500px) rotateY(50deg);
    transform-style: preserve-3d;
    background-color: #ddd;
    font-size: 24px;
  }
  .box {
    width: 50px;
    height: 50px;
    background-color: pink;
    transition-property: all;
    transition-duration: 0.8s;
    transition-delay: 1s;
    transform-origin: center;
  }

  main:hover .box {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    transform: rotateY(90deg) translateZ(180px);
    background-color: skyblue;
    /* transition-delay: 0s; */
  }
<样式>
  <main>
    <p>跨过这堵墙</p>
    <div class="box"></div>
  </main>

若我们想要立即触发动画，只在恢复时延迟过渡，该怎么办呢？

我们只需要在动画触发时，重新设置transition-delay: 0s 即可，动画一旦出发就会应用对应的样式表，这时重置延时为0s，动画执行完毕，恢复原来样式，而原来样式表中transition-delay: 1s设置延时为1s，恢复时就会延时1s。

我们只需要在原有代码基础上添加

  main:hover .box {
    ……
    transition-delay: 0s;
  }

添加之后效果：

当同时使用多个动画时，这个属性使用频率非常高，可依次定义每个动画的延迟执行时间，区分开每个动画。

当然其实也可分别设置每个动画的其它transition族属性，后面会详细介绍多动画累加。

多属性累加

​ 我们知道，当transition-property属性值为all，则所有transition能够支持的属性发生改变时，都会触发过渡效果，但能不能对每个属性的过渡分别进行设置呢？

答案是当然可以，之前介绍的transition族属性都可以设置多个值，各个值之间使用,隔开，从而分别设置各个属性的过渡效果。

值得注意的是：其它transition族属性在设置多个值时，要与transition-property定义的各个属性对应起来，才能准确对目标属性定制过渡效果。

例如：

transition-property: width, heitht, color ;
trnasition-duration: 1s, 1.5s, 2s ;
transition-timing-function: ease, linear, ease-in-out ;
transition-delay: 0s, 1s, 0s ;

当然，也可使用transition综合属性:

定义顺序分别为：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

下面代码与上例效果相同

transition: width 1s ease ,heitht 1.5s linear 1s, color 2s ease-in-out ;

最后

文笔有限，才疏学浅，文中若有不正之处，速速告知。