CODEWITHSUNDEEP
cssanimation
IrfanM
IrfanM

Reputation: 725

Why ins't this CSS3 animation running?

This is my first time writing a CSS3 animation by myself and I just opened the page and it is not running.

The only effect is that what the animation fallB is applied to, that disappears, but is in the same position.

Nothing happens to the other elements that the animations are applied to.

What am I doing wrong?

Here is my code:

.animated{
        -moz-transform: translate(0,0);
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
        -moz-transform3d: translate(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    .animated.fallA{
        -moz-animation: fallA 1s forwards ease-in-out;
        -webkit-animation: fallA 1s forwards ease-in-out;
        animation: fallA 1s forwards ease-in-out;
    }
    .animated.fallB{
        -moz-animation: fallB 1s forwards ease-in-out;
        -webkit-animation: fallB 1s forwards ease-in-out;
        animation: fallB 1s forwards ease-in-out;
    }
    .animated.fallC{
        -moz-animation: fallC 1s forwards ease-in-out;
        -webkit-animation: fallC 1s forwards ease-in-out;
        animation: fallC 1s fowards ease-in-out;
    }
    .animated.fallD{
        -moz-animation: fallD 1s forwards ease-in-out;
        -webkit-animation: fallD 1s forwards ease-in-out;
        animation: fallD 1s forwards ease-in-out;
    }
    .animated.fallE{
        -moz-animation: fallE 1s forwards ease-in-out;
        -webkit-animation: fallE 1s forwards ease-in-out;
        animation: fallE 1s forwards ease-in-out;
    }
    @-moz-keyframes fallA{
        0%{
            position:relative;
            opacity:0.0;
            top:-300px;
            left:-400px;
        }
        100%{
            opacity:1.0;
            top:0;
            left:0;
        }
    }
    @-webkit-keyframes fallA{
        0%{
            position:relative;
            opacity:0.0;
            top:-300px;
            left:-400px;
        }
        100%{
            opacity:1.0;
            top:-300px;
            left:-400px;
        }
    }
    @keyframes fallA{
        0%{
            position:relative;
            opacity:0.0;
            top:-300px;
            left:-400px;
        }
        100%{
            opacity:1.0;
            top:-300px;
            left:-400px;
        }
    }
    @-moz-keyframes fallB{
        0%{
            position:relative;
            opacity:0.0;
            top:-200px;
            left:-200px;
        }
        100%{
            opacity:1.0;
            top:0;
            left:0;
        }
    }
    @-webkit-keyframes fallB{
        0%{
            position:relative;
            opacity:0.0;
            top:-200px;
            left:-200px;
        }
        100%{
            opacity:0.0;
            top:0;
            left:0;
        }
    }
    @keyframes fallB{
        0%{
            position:relative;
            opacity:0.0;
            top:-200px;
            left:-200px;
        }
        100%{
            opacity:1.0;
            top:0;
            left:0;
        }
    }
    @-moz-keyframes fallC{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        100%{
            opacity:1.0;
            top:0;
        }
    }
    @-webkit-keyframes fallC{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        100%{
            opacity:1.0;
            top:0;
        }
    }
    @keyframes fallC{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        100%{
            opacity:1.0;
            top:0;
        }
    }
    @-moz-keyframes fallD{
        0%{
            position:relative;
            opacity:0.0;
            top:-200px;
            right:-200px;
        }
        100%{
            opacity:1.0;
            top:-200px;
            right:-200px;
        }
    }
    @-webkit-keyframes fallD{
        0%{
            position:relative;
            opacity:0.0;
            top:-200px;
            right:-200px;
        }
        100%{
            opacity:1.0;
            top:-200px;
            right:-200px;
        }
    }
    @keyframes fallD{
        0%{
            position:relative;
            opacity:0.0;
            top:-200px;
            right:-200px;
        }
        100%{
            opacity:1.0;
            top:0;
            right:0;
        }           
    }
    @-moz-keyframes fallE{
        0%{
            position:relative;
            opacity:0.0;
            top:-300px;
            right:-400px;
        }
        100%{
            opacity:1.0;
            top:0;
            right:0;
        }
    }
    @-webkit-keyframes fallE{
        0%{
            position:relative;
            opacity:0.0;
            top:-300px;
            right:-400px;
        }
        100%{
            opacity:1.0;
            top:0;
            right:0;
        }
    }
    @keyframes fallE{
        0%{
            position:relative;
            opacity:0.0;
            top:-300px;
            right:-400px;
        }
        100%{
            opacity:1.0;
            top:0;
            right:0;
        }
    }

Upvotes: 0

Views: 127

Answers (1)

Ol Sen
Ol Sen

Reputation: 3368

you need a fixed point somewhere in your html markup on which the keyframes positions are based on. if everything is position:relative there is no basepoint to animate something to/from. assuming you are working here with safari because your @-webkit-keyframes fallB has opacity:0.0 which is other then your @-moz-keyframes fallB settings say. means in firefox you should see that class="animated fallB" does not disappear.

and a tip on top. if you make keyframed animations, try to code them in one browserstyle first and then apply them to the other browsers codes. you become confused and perhaps you make errors if to much css values are defined to have the same visual.

you will see some success if you put .animated { position:absolute; .. into your css

Upvotes: 1

Related Questions