CSS3 Transition not working

Question

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

User · Answer

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   For example  to make a node collapse  when it s height is auto and must stay that way  put the transition on max-height instead  Give max-height a sensible initial value  then transition it to 0

User · Answer

Transition is more like an animation   div sicon a       background -moz-radial-gradient left   ffffff 24    cba334 88        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        So you need to invoke that animation with an action   div sicon a hover       background -moz-radial-gradient left   cba334 24    ffffff 88        Also check for browser support and if you still have some problem with whatever you re trying to do  Check css-overrides in your stylesheet and also check out for behavior      htc css hacks   there may be something overriding your transition   You should check this out  http   www w3schools com css css3 transitions asp

User · Answer

If you have a  lt script gt  tag anywhere on your page  even in the HTML  even if it is an empty tag with a src   then a transition must be activated by some event  it won t fire automatically when the page loads

User · Answer

HTML    lt div class  foo  gt         whatever is required     lt  div gt    CSS    foo       top  0      transition  top ease 0 5s      foo hover      top  -10px      This is just a basic transition to ease the div tag up by 10px when it is hovered on  The transition property s values can be edited along with the class hover properties to determine how the transition works

User · Answer

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

[css] CSS3 Transition not working

Examples related to css

Examples related to css-transitions