如何在一个元素上有多个CSS过渡？

本文翻译自：How to have multiple CSS transitions on an element?

It's a pretty straightforward question but I can't find very good documentation on the CSS transition properties. 这是一个非常简单的问题，但是我找不到关于CSS过渡属性的很好的文档。 Here is the CSS snippet: 这是CSS代码段：

.nav a { text-transform:uppercase; text-decoration:none; color:#d3d3d3; line-height:1.5 em; font-size:.8em; display:block; text-align:center; text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15); -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -o-transition: color .2s linear; transition: color .2s linear; -webkit-transition: text-shadow .2s linear; -moz-transition: text-shadow .2s linear; -o-transition: text-shadow .2s linear; transition: text-shadow .2s linear; } .nav a:hover { color:#F7931E; text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15); }

As you can see, the transition properties are overwriting eachother. 如您所见，过渡属性相互覆盖。 As it stands, the text-shadow will animate, but not the color. 就目前而言，文本阴影将设置动画，但颜色将不设置动画。 How do I get them both to simultaneously animate? 如何让它们同时进行动画处理？ Thanks for any answers. 感谢您的回答。

---

#1楼

参考：https://stackoom.com/question/TZaT/如何在一个元素上有多个CSS过渡

---

#2楼

You can also simply significantly with: 您还可以简单地通过以下方式显着地：

.nav a { -webkit-transition: all .2s; }

---

#3楼

Here's a LESS mixin for transitioning two properties at once: 这是一个LESS mixin，用于一次转换两个属性：

.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) { -webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration; -moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration; -o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration; transition: @transition1 @transition1-duration, @transition2 @transition2-duration; }

---

#4楼

.nav a { transition: color .2s, text-shadow .2s; }

---

#5楼

If you make all the properties animated the same, you can set each separately which will allow you to not repeat the code. 如果将所有属性设置为相同的动画，则可以分别设置每个属性，这样就不必重复代码。

transition: all 2s; transition-property: color, text-shadow;

There is more about it here: CSS transition shorthand with multiple properties? 这里有更多信息： 具有多个属性的CSS过渡简写？

I would avoid using the property all (transition-property overwrites 'all'), since you could end up with unwanted behavior and unexpected performance hits. 我会避免使用all属性（过渡属性会覆盖“ all”），因为您最终可能会遇到不良行为和意外的性能损失。

---

#6楼

It's possible to make the multiple transitions set with different values for duration, delay and timing function. 可以使用持续时间，延迟和计时功能的不同值来设置多个转换。 To split different transitions use , 要拆分不同的过渡，请使用,

button{ transition: background 1s ease-in-out 2s, width 2s linear; -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */ }

Reference: https://kolosek.com/css-transition/ 参考： https ： //kolosek.com/css-transition/