Menu
i have a link with an inline svg and a text. I want to animate on :hover (or add an .active class), but on Chrome the transition isn't happening at the same time. On Firefox everything is working perfect. Here is the demo:
[DEMO](http://codepen.io/anon/pen/QNvgvy)
Is there somebody who knows a solution for this problem? Thank you!
804
The transition-delay property specifies when the transition effect will start. The transition-delay value is defined in seconds (s) or milliseconds (ms).
The reason for this is, display:none property is used for removing block and display:block property is used for displaying block. A block cannot be partly displayed. Either it is available or unavailable. That is why the transition property does not work.
The CSS animation-delay property has the following syntax: animation-delay: [time] | initial | inherit; As you can see, there are three possible values: time, initial, and inherit. The first option is [time], which is the number of seconds or milliseconds before the animation starts.
CSS Transition-Property Here's an example of the syntax: transition-duration: 1s; transition-property: background, color; This will make the background and color transition in 1 second, but nothing else will be transitioned.
I guess what happens here is the difference between FF and Chrome in the way inherited css is propagated during transition phase. FF does so immediately, while Chrome applies new style value to a child element only when transition on parent is finished.
Take a look at this example: https://jsbin.com/koruyeludi/1/edit?html,css,js,console,output and keep an eye on color values printed in console when you hover.
Example has 2 spans, .child is nested within .parent. Both have transition applied to them. When you hover over parent span, color is changed gradually. Once transition is done on parent, color is changed on child node. And since it has transition as well it comes into play now.
So in your example you have * { transition: all 1s; }. Parent <a> will be in color transition during [0s-1s] interval. <span> and <svg> will be changing their color during [1s-2s]. And <path> will be making a change in [2s-3s].
To avoid that, apply transition: only once - on root <a> element).
115
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
