CSS 的过渡——以简述实现美妙的动画效果

2023-11-04 09:30:10

从前的动画实现，通常借助于JavaScript的帮助，但现在CSS3已经可以只用几行代码来实现。这篇文章，我们用一个有趣的CSS过渡示例，一起来看看CSS过渡属性transition是如何让我们在网页上实现美妙的动画效果的。

CSS的过渡transition属性可以仅通过CSS来实现简单的动画效果，同时它是一个简写属性，由transition-property、transition-duration、transition-timing-function和transition-delay复合而成。

我们来看一个例子：

p {
  transition: color 2s ease-in-out;
}

p:hover {
  color: red;
}

这段代码实现了当鼠标悬停在段落上时，段落的颜色在2秒内从黑色过渡到红色。

现在我们来具体分析一下这段代码：

transition: color 2s ease-in-out;
- color指定动画效果作用于color属性。
- 2s指定动画效果的持续时间为2秒。
- ease-in-out指定动画效果的过渡函数为缓入缓出。
p:hover {
- color: red;
- 鼠标悬停在段落上时，段落的颜色变为红色。

我们同样来看一个例子：

.box {
  transition: opacity 2s ease-in-out;
}

.box:hover {
  opacity: 0;
}

这段代码实现了当鼠标悬停在元素上时，元素逐渐消失。

现在我们来具体分析一下这段代码：

transition: opacity 2s ease-in-out;
- opacity指定动画效果作用于opacity属性。
- 2s指定动画效果的持续时间为2秒。
- ease-in-out指定动画效果的过渡函数为缓入缓出。
.box:hover {
- opacity: 0;
- 鼠标悬停在元素上时，元素的透明度变为0，即元素消失。

我们再来看一个例子：

.box {
  transition: transform 2s ease-in-out;
}

.box:hover {
  transform: translateX(100px);
}

这段代码实现了当鼠标悬停在元素上时，元素向右移动100像素。

现在我们来具体分析一下这段代码：

transition: transform 2s ease-in-out;
- transform指定动画效果作用于transform属性。
- 2s指定动画效果的持续时间为2秒。
- ease-in-out指定动画效果的过渡函数为缓入缓出。
.box:hover {
- transform: translateX(100px);
- 鼠标悬停在元素上时，元素向右移动100像素。