CSS transition举例

马黑黑

先看效果：

花潮论坛欢迎您

以上效果，代码如下：

<style>
.mama {
   margin: 50px auto 0;
   width: 300px;
   height: 100px;
   background: #eee;
   border: 1px solid rgba(0,0,0,.6);
   font: bold 2em /100px sans-serif;
   color: blue;
   text-align: center;
   text-shadow: 1px 1px 3px rgba(0,0,0,.6);
   transition: all 2s ease 0s;
}
.mama:hover {
   transform: skew(-15deg);
   color: purple;
   cursor: pointer;
}
</style>

<div class="mama">花潮论坛欢迎您</div>

transition 要放在原始元素中，可接收四个参数：参数一，动画指向的元素属性值，比如，只规定字体颜色，则本例中的 all 改为 color；参数二，动画时长，例中的 2s；参数三，动画方式，例中的 ease，我们最常用的是linear；最后一个是延时，例中的 0s ，0s 表示马上执行（注意，即使是0，秒的单位 s 也是不可以省略的！）。

transition 是鼠标滑动交互的一个过渡属性，广泛应用于web页。通过本例，可以较好地理解其用法。

樵歌

花潮论坛欢迎你

红影

transition 和 transform ，有点傻傻地分不清了

红影

哦，我说错了，是分不清transition和animation ，两者设置的方法好像差不多啊。

马黑黑

红影 发表于 2022-7-1 10:43
哦，我说错了，是分不清transition和animation ，两者设置的方法好像差不多啊。

transition 是独立存在的过渡动画，不依赖于 transform 转换动画，也不依赖 animation 来调用。

transition 自身有四个参数，语法结构与 animation 差不多。transition 的第一个参数不是 @keyframes 动画名称，而是元素的某一个属性名称，比如 width、height、color 等等。

马黑黑

樵歌 发表于 2022-7-1 09:47
花潮论坛欢迎你

红影

马黑黑 发表于 2022-7-1 12:15
transition 是独立存在的过渡动画，不依赖于 transform 转换动画，也不依赖 animation 来调用。

trans ...

嗯嗯，两者的区别最关键的还是在第一个参数上，而且前者直接设置，不需要调用。

马黑黑

红影 发表于 2022-7-1 16:08
嗯嗯，两者的区别最关键的还是在第一个参数上，而且前者直接设置，不需要调用。

它不调用，没它也行，有它就规范了一下时间啥的

樵歌

马黑黑 发表于 2022-7-1 12:15

马黑黑

樵歌 发表于 2022-7-1 21:38

又喝起

红影

马黑黑 发表于 2022-7-1 18:12
它不调用，没它也行，有它就规范了一下时间啥的

还是有它的好，更可控点。

马黑黑

红影 发表于 2022-7-1 21:42
还是有它的好，更可控点。

当然是这样

樵歌

马黑黑 发表于 2022-7-1 21:39
又喝起

早上再喝

马黑黑

樵歌 发表于 2022-7-2 08:31
早上再喝

樵歌

马黑黑 发表于 2022-7-2 08:35

下午喝多了失眠

马黑黑

樵歌 发表于 2022-7-2 16:48
下午喝多了失眠

那就抿一口

樵歌

马黑黑 发表于 2022-7-2 17:59
那就抿一口

喝三百杯

马黑黑

樵歌 发表于 2022-7-3 17:19
喝三百杯

一醉五百年

樵歌

马黑黑 发表于 2022-7-3 19:32
一醉五百年

向天再借五百年

马黑黑

樵歌 发表于 2022-7-4 19:12
向天再借五百年

不知道利息高不高