CODEWITHSUNDEEP
csscss-transitions
Extelliqent
Extelliqent

Reputation: 1860

CSS3 Transition not working

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 */
}

Upvotes: 44

Views: 186584

Answers (7)

Derek
Derek

Reputation: 9

If you're using react and you run into this problem, make sure your component is kept in a different file other than the parent component. What I mean is:

const Parent = () => {
    const ChildComp = () => (
    // element whose transition wont work
    )
    return (
        <div>
           <ChildComp />
        </div>
    )
}

Upvotes: 0

bbsimonbb
bbsimonbb

Reputation: 28972

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 its 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.

Upvotes: 83

RandomPersonWhoWantsToAnswerQs
RandomPersonWhoWantsToAnswerQs

Reputation: 1

Some browsers do not support the code. Maybe try using a different browser

Upvotes: -11

SandstormNick
SandstormNick

Reputation: 2011

HTML:

<div class="foo">
    /* whatever is required */
</div>

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.

Upvotes: 1

Abel Wenning
Abel Wenning

Reputation: 652

If you have a <script> 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).

Upvotes: 4

Abdrhmn
Abdrhmn

Reputation: 641

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;
}

Upvotes: 38

Berker Y&#252;ceer
Berker Y&#252;ceer

Reputation: 7325

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

Upvotes: 25

Related Questions