Menu
I couldn't get transitions to work on this page, anybody has any idea why?
div.sicon a { transition: background 0.5s linear; -moz-transition: background 0.5s linear; /* Firefox 4 */ -webkit-transition: background 0.5s linear; /* Safari and Chrome */ -o-transition: background 0.5s linear; /* Opera */ -ms-transition: background 0.5s linear; /* Explorer 10 */ } 
712
If you have a transition not working, check that the starting value of the property is explicitly set. Sometimes, you'll want to animate height and width when the starting or finishing value is auto . (For example, to make a div collapse, when its height is auto and must stay that way.)
When we want to use transition for display:none to display:block, transition properties do not work. 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.
To make the transition occur, you must specify at least two things — the name of the CSS property to which you want to apply the transition effect using the transition-property CSS property, and the duration of the transition effect (greater than 0) using the transition-duration CSS property.
This will animate the color property when you hover over a link on the page. Pretty simple, and you've probably seen or used something similar. But transitions are not just limited to use with :hover . You can animate CSS properties, thus use CSS transitions without hover.
A general answer for a general question... Transitions can't animate properties that are auto. If you have a transition not working, check that the starting value of the property is explicitly set.
Sometimes, you'll want to animate height and width when the starting or finishing value is auto. (For example, to make a div collapse, when it's height is auto and must stay that way.) In this case, put the transition on max-height instead. Give max-height a sensible initial value (bigger than its actual height), then transition it to 0)
187
For me, it was having display: none;
#spinner-success-text { display: none; transition: all 1s ease-in; } #spinner-success-text.show { display: block; } Removing it, and using opacity instead, fixed the issue.
#spinner-success-text { opacity: 0; transition: all 1s ease-in; } #spinner-success-text.show { opacity: 1; } 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
