css3系列之过渡transition

冷不防 2023-08-17 15:23 115阅读 0赞

**transition**

**设置变换属性的过渡效果，举个例子，也就是说， 如果从width100px 变成 width200px，要以什么方式进行变换，速度，时间，类型等。**

transition

transition-property

transition-duration

transition-timing-function

transition-delay

**transition-property**

指定参与过渡的属性。

参数：

none：默认值，也是没有

all：监测所有变换属性的属性。

支持过渡效果的属性有以下：(可以单独设置,如果设置多个属性值，用逗号分隔)

<table> 
 <thead> 
 <tr> 
 <th>属性名称</th> 
 <th>类型</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>transform</td> 
 <td>all</td> 
 </tr> 
 <tr> 
 <td>background-color</td> 
 <td>color</td> 
 </tr> 
 <tr> 
 <td>background-image</td> 
 <td>only gradients</td> 
 </tr> 
 <tr> 
 <td>background-position</td> 
 <td>percentage, length</td> 
 </tr> 
 <tr> 
 <td>border-bottom-color</td> 
 <td>color</td> 
 </tr> 
 <tr> 
 <td>border-bottom-width</td> 
 <td>length</td> 
 </tr> 
 <tr> 
 <td>border-color</td> 
 <td>color</td> 
 </tr> 
 <tr> 
 <td>border-left-color</td> 
 <td>color</td> 
 </tr> 
 <tr> 
 <td>border-left-width</td> 
 <td>length</td> 
 </tr> 
 <tr> 
 <td>border-right-color</td> 
 <td>color</td> 
 </tr> 
 <tr> 
 <td>border-right-width</td> 
 <td>length</td> 
 </tr> 
 <tr> 
 <td>border-spacing</td> 
 <td>length</td> 
 </tr> 
 <tr> 
 <td>border-top-color</td> 
 <td>color</td> 
 </tr> 
 <tr> 
 <td>border-top-width</td> 
 <td>length</td> 
 </tr> 
 <tr> 
 <td>border-width</td> 
 <td>length</td> 
 </tr> 
 <tr> 
 <td>bottom</td> 
 <td>length, percentage</td> 
 </tr> 
 <tr> 
 <td>color</td> 
 <td>color</td> 
 </tr> 
 <tr> 
 <td>crop</td> 
 <td>rectangle</td> 
 </tr> 
 <tr> 
 <td>font-size</td> 
 <td>length, percentage</td> 
 </tr> 
 <tr> 
 <td>font-weight</td> 
 <td>number</td> 
 </tr> 
 <tr> 
 <td>grid-*</td> 
 <td>various</td> 
 </tr> 
 <tr> 
 <td>height</td> 
 <td>length, percentage</td> 
 </tr> 
 <tr> 
 <td>left</td> 
 <td>length, percentage</td> 
 </tr> 
 <tr> 
 <td>letter-spacing</td> 
 <td>length</td> 
 </tr> 
 <tr> 
 <td>line-height</td> 
 <td>number, length, percentage</td> 
 </tr> 
 <tr> 
 <td>margin-bottom</td> 
 <td>length</td> 
 </tr> 
 <tr> 
 <td>margin-left</td> 
 <td>length</td> 
 </tr> 
 <tr> 
 <td>margin-right</td> 
 <td>length</td> 
 </tr> 
 <tr> 
 <td>margin-top</td> 
 <td>length</td> 
 </tr> 
 <tr> 
 <td>max-height</td> 
 <td>length, percentage</td> 
 </tr> 
 <tr> 
 <td>max-width</td> 
 <td>length, percentage</td> 
 </tr> 
 <tr> 
 <td>min-height</td> 
 <td>length, percentage</td> 
 </tr> 
 <tr> 
 <td>min-width</td> 
 <td>length, percentage</td> 
 </tr> 
 <tr> 
 <td>opacity</td> 
 <td>number</td> 
 </tr> 
 <tr> 
 <td>outline-color</td> 
 <td>color</td> 
 </tr> 
 <tr> 
 <td>outline-offset</td> 
 <td>integer</td> 
 </tr> 
 <tr> 
 <td>outline-width</td> 
 <td>length</td> 
 </tr> 
 <tr> 
 <td>padding-bottom</td> 
 <td>length</td> 
 </tr> 
 <tr> 
 <td>padding-left</td> 
 <td>length</td> 
 </tr> 
 <tr> 
 <td>padding-right</td> 
 <td>length</td> 
 </tr> 
 <tr> 
 <td>padding-top</td> 
 <td>length</td> 
 </tr> 
 <tr> 
 <td>right</td> 
 <td>length, percentage</td> 
 </tr> 
 <tr> 
 <td>text-indent</td> 
 <td>length, percentage</td> 
 </tr> 
 <tr> 
 <td>text-shadow</td> 
 <td>shadow</td> 
 </tr> 
 <tr> 
 <td>top</td> 
 <td>length, percentage</td> 
 </tr> 
 <tr> 
 <td>vertical-align</td> 
 <td>keywords, length, percentage</td> 
 </tr> 
 <tr> 
 <td>visibility</td> 
 <td>visibility</td> 
 </tr> 
 <tr> 
 <td>width</td> 
 <td>length, percentage</td> 
 </tr> 
 <tr> 
 <td>word-spacing</td> 
 <td>length, percentage</td> 
 </tr> 
 <tr> 
 <td>z-index</td> 
 <td>integer</td> 
 </tr> 
 <tr> 
 <td>zoom</td> 
 <td>number</td> 
 </tr> 
 </tbody> 
</table>

![1609428-20190726154410502-846798637.gif][]

**transition-duration**

**　**　设置过渡的需要时间，(也就是说，需要多久才能完成这个 过渡效果)

参数：

0：默认值

1s, 2.5s 等等

![1609428-20190726154849599-924285515.gif][]

**transition-timing-function**

**　　**设置过渡动画的类型，举个例子： 匀速动画， 加速动画。

参数：

linear：匀速过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) (默认值)

ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

cubic-bezier：特定的贝塞尔曲线类型。

step-start:：等同于 steps(1, start)

step-end：等同于steps(1, end)

steps(第一个参数必须为正数，指定动画会以几步的方式来分割总时长

看不懂什么叫做贝塞尔曲线的话，没关系，我们知道怎么设置就行了，下面：

设置好后，在控制台就可以看见他了。

![1609428-20190726155940513-1210328744.png][]

通过调节这两个小球，就会出现不一样的运动效果，上面有个小球，是给你预览效果的。

![1609428-20190726160158095-1648181156.gif][]

简单来说一下就可以了，比如下面的小红点的位置，那么在前后各取一个点

y1 - y2

\----------- = 以下面的图为例，x1 和 y1 是大于 x2 和 y2 的，那么得出来的结果是正数，

x1 - x2 　　　这个数呢，就是速度，而且是正的，代表了是往前进的方向运动，负的，会往后退。

![1609428-20190726160501609-267342214.png][]

steps(60, start) steps(60, end)

先来看看，没有加 steps 和 有加的区别。

![1609428-20190728145918233-922553466.gif][]

会明显的看到效果，因为我填的是 steps(10, end) ，end先不要管他，先来看看 第一个参数，这个参数呢，会把总时长，6s 分成 10部分， 6/10 =0.6，0.6秒执行一次，所以，这个动画，会分成 10 步执行。

如果仔细观看的同学，你会发现，他好像只执行了 9次，那么差一次呢? 问题就出现在 end 这个参数，如果你填了 end 那么就会忽略掉最后一步， 填start，就会忽略掉 第一步。

![1609428-20190728150912529-497199067.gif][]

那么利用这个参数可以干嘛呢？ 可以完成 逐帧动画 →[css3系列之animation实现逐帧动画][css3_animation]

**transition-delay**

**　　**这个属性吧，像setTimeout，延迟，延迟多少时间后，执行这个动画。

默认值是0。 还是一样，如果要设置多个属性，用逗号隔开。

![1609428-20190726161907573-1713047880.gif][]

**transition**

上面几个属性的简写：

第一个值为：property

第二个值为：duration

第三个值为：timing-function

第四个值为：delay

transition: width 1s linear 1s

上面的表示了，我要监听 该元素width的变化， 如果他改变了，那么 在等待1s后，执行这个动画，用linear效果，1s的时间内完成

转载于:https://www.cnblogs.com/yanggeng/p/11251046.html

[1609428-20190726154410502-846798637.gif]: /images/20230810/ad20d377978144eaa7bbfa3f6504cc71.png
[1609428-20190726154849599-924285515.gif]: /images/20230810/037683dd2af947579696a4207b612ac2.png
[1609428-20190726155940513-1210328744.png]: /images/20230810/5503a6327d8b42678dff897f601c5611.png
[1609428-20190726160158095-1648181156.gif]: /images/20230810/6bb5fd9ce0d54c2192ba58f720d6d33b.png
[1609428-20190726160501609-267342214.png]: /images/20230810/3b9eaeafa36e4f90b3928e3d289144ed.png
[1609428-20190728145918233-922553466.gif]: /images/20230810/e168971c57ba4a068eb4cfa0cfe66392.png
[1609428-20190728150912529-497199067.gif]: /images/20230810/74901ec874e8430fb845011b2984c61f.png
[css3_animation]: https://www.cnblogs.com/yanggeng/p/11259370.html
[1609428-20190726161907573-1713047880.gif]: /images/20230810/963c46a5ca3f474fa26d0f568b926d26.png