css3 动画（一） transition

2024年4月30日 173次阅读来源: hileix

前言

最近在研究 css3 的动画属性 transition 和 animation，发现自己之前对这两个 css3 的动画属性并没有太多深入的理解。本篇将介绍 css3 的 transition 以及自己的一些理解。

首先，transition 意为 “过渡，转场”，即从一种状态变为另外一种状态的中间过程。css3 的 transition 属性，就是用来配置这个中间状态的。

css3 中的 transition 属性是 css3 过渡的四个属性的简写形式，其四个 css3 的属性分别为：

transition-property：需要过渡的 css 属性，如 width
transition-duration：过渡的时长，如 1s
transition-timing-function：指定一个函数，该函数反应了属性值的变化快慢（速度）。可以是缓动函数的名称，也可以是 css3 中的贝塞尔曲线函数
transition-delay：延迟开始过渡的时间，如 0.5s

例子：

<div>transition</div>

div {
  background: #fff;
  color: #000;
  transition: all 1s linear 0.5s;
}
div:hover {
  background: #000;
  color: #fff;
}

在代码中，可以看到，我们需要预先使用 transition 属性，配置选择器样式的变化过程。这个过程包含了四个属性：需要有过渡效果的属性、过渡时间、过渡速度变化函数以及延迟多久开始过渡。

然后，配置完 transition 属性之后，在用户产生某个行为时（如鼠标 hover 到该元素上时），重新设置需要有过渡效果的属性的新值。

在上面的例子中：

倘若不使用 css3 的 transition 过渡属性的话，则当 div 被 hover 时，div 的背景和字体样式会瞬间从没 hover 时的状态 变为 被 hover 时的状态，没有过渡的效果。

上面的例子中，使用了 transition 属性：

只有当过渡状态过程中，transition 属性存在（transition 被选择器应用时）时，才会有过渡的效果，否则没有过渡效果。

什么意思呢？

我们可以看到上面的例子中：

因为此时 transition 属性是设置在 div 选择器上的，不管移入和移出 div，transition 属性都在过渡的过程中被 div 应用上了。

我们改一下代码（将 transition 属性应用在 div 被 hover 时的选择器上）

div {
  background: #fff;
  color: #000;
  }
div:hover {
  background: #000;
  color: #fff;
  transition: all 1s linear 0.5s;
}

此时可以看到：

移入时，transition 在 div:hover 选择器上将 transition 属性应用在了 div 上，即在过渡的过程中，div 是有 transition 属性应用的

移出时，div 上没有了 transition 属性，此时便没有了过渡效果，而是瞬间效果。

1. 其实 transition 很简单，就四个属性：

2. 注意只有当选择器在过渡的过程中，被应用了 transition 属性，才会有过渡效果，否则是没有过渡效果的，只有瞬间效果

    原文作者：hileix
    原文地址: https://segmentfault.com/a/1190000015567752
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。