🔥 一篇学会CSS过度动画transition

📌前言

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

文章只记录编码中需要并常用的 , 晦涩不常用的就不介绍了, 想学习的同学可以自行搜索相关资料。

本篇介绍transition过渡动画,想学自定义动画稍等作者过几日更新。

🍉transition-duration 动画过度时间

我们编码时常会使用:hover去定义鼠标移入后改变元素的样式,但是在不定义动画时,样式的改变往往是一瞬间的事情。

所以使用transition-duration就变得至关重要,这也是编码最常用的的动画元素。

默认值为0s

可以设置 [number]s以及[number]ms

示例

设置了过渡时间为0.8s

<div class="divClass"></div>

.divClass{
  width: 300px;
  height: 300px;
  background: #b5f18e;
  /* 过度时间 */
  transition-duration:0.8s;
}
.divClass:hover{
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: #b5dafc;
}

🍈transition-timing-function动画执行方式

值	描述
linear	动画从头到尾的速度是相同的。
ease(缓解)	默认值：动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n ,n ,n ,n)	贝塞尔曲线（自定义数值），可到相关网站可视化设置。

因为我为了照顾初学者演示介绍 , 所以编码的变化不多,效果不明显,编码变化效果多的时候会非常明显。

示例

设置了以低速结束

<div class="divClass"></div>

.divClass{
  width: 300px;
  height: 300px;
  background: #b5f18e;
  /* 过度时间 */
  transition-duration:2s;
  /* 过度方式 */
  animation-timing-function:ease-out;
}
.divClass:hover{
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: #b5dafc;
}

注意:贝塞尔曲线基本上不会使用 , 不过在特定情况下是需要的 , 可以稍微了解一下

🍇transition-delay动画延迟时间

默认值为0s

可以设置 [number]s以及[number]ms

示例

设置了延迟时间100ms

<div class="divClass"></div>

.divClass{
  width: 300px;
  height: 300px;
  background: #b5f18e;
  /* 过度时间 */
  transition-duration:0.8s;
  /* 过度方式 */
  animation-timing-function: ease-in-out;
  /* 过度延迟 */
  transition-delay:1000ms;
}
.divClass:hover{
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: #b5dafc;
}

🍓transition简写

以上三个属性不一定要分开写 , 下面是简写

定义顺序分别为：

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

transition: 0.8s ease-in-out 1000ms;

📚总结

答应我 , 一定要学会!!!