How to have multiple CSS transitions on an element

Question

It s a pretty straightforward question but I can t find very good documentation on the CSS transition properties  Here is the CSS snippet        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

User · Answer

Here s a LESS mixin for transitioning two properties at once    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

User · Answer

It s also possible to avoid specifying the properties altogether    box     transition  0 4s    position  absolute    border  1px solid darkred    bottom  20px  left  20px    width  200px  height  200px    opacity  0      box on     opacity  1    height  300px    width  500px

User · Answer

Something like the following will allow for multiple transitions simultaneously   -webkit-transition  color  2s linear  text-shadow  2s linear     -moz-transition  color  2s linear  text-shadow  2s linear       -o-transition  color  2s linear  text-shadow  2s linear          transition  color  2s linear  text-shadow  2s linear    Example  http   jsbin com omogaf 2

User · Answer

nav a       transition  color  2s  text-shadow  2s

User · Answer

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   I would avoid using the property all  transition-property overwrites  all    since you could end up with unwanted behavior and unexpected performance hits

User · Answer

EDIT  I m torn on whether to delete this post  As a matter of understanding the CSS syntax  it s good that people know all exists  and it may at times be preferable to a million individual declarations  depending on the structure of your CSS  On the other hand  it may have a performance penalty  although I ve yet to see any data supporting that hypothesis  For now  I ll leave it  but I want people to be aware it s a mixed bag  Original post  You can also simply significantly with   nav a       transition  all  2s     FWIW  all is implied if not specified  so transition   2s  will get you to the same place

User · Answer

Transition properties are comma delimited in all browsers that support transitions    nav a     transition  color  2s  text-shadow  2s      ease is the default timing function  so you don t have to specify it  If you really want linear  you will need to specify it   transition  color  2s linear  text-shadow  2s linear    This starts to get repetitive  so if you re going to be using the same times and timing functions across multiple properties it s best to go ahead and use the various transition-  properties instead of the shorthand   transition-property  color  text-shadow  transition-duration   2s  transition-timing-function  linear

User · Answer

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

[animation] How to have multiple CSS transitions on an element?

Examples related to animation

Examples related to css

Examples related to css-transitions