keyframes animation in html css not working

Question

I am playing with some animations, but it won't work at all. It has to be a bounce animation. This is my first time working with it. So I hope I don't make very bad mistake

This is mine .html file:

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div class="logo"><img src="Header_red.png"/></div>
<div class="intro"><p>some text</p></div>
</body>
</html>

This is my .css file:

    html{
    background: url(background.jpg) no-repeat center center fixed;
    overflow:hidden;    
}

.logo
{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    animation-delay:1.2s;
    animation-duration:4.8s;
    animation-iteration-count:1;
    animation-fill-mode:both;
    animation-name:logo;    
}


.intro{
        text-align:left;
    margin-left:100px;
    margin-right:auto;
    animation-duration:5.5s;
    animation-iteration-count:1;
    animation-fill-mode:both;
    animation-name:logo;        
}
@keyframes logo {
    0%{transform: 
        translate(000px, 1500px);}
    20%
    {
        transform:translate(000px, 235px);
    }
    25%
    {
        transform:translate(000px, 265px);
    }
    65%
    {
        transform:translate(000px, 265px);
    }
    100%
    {
        transform:translate(000px, -300px);
    }
}


@keyframes intro{

0% {transform:
translate(000px, -400px);}
65% {transform:
translate(000px, -165px);}
100% {transform:
translate(000px, -135px);}
}

I hope someone could help me! Thanks!

AfromanJ · Accepted Answer · 2013-11-08 13:45:35Z

7

You need to add prefixes for browser support:

Keyframes CSS

@keyframes logo 
{
    //animate
}
@-moz-keyframes logo  /* Firefox */
{
    //animate
}
@-webkit-keyframes logo  /* Safari and Chrome */
{
    //animate
}
@-o-keyframes logo  /* Opera */
{
    //animate
}
@-ms-keyframes logo  /* IE */
{
    //animate
}

Element CSS

animation: value;
-moz-animation: value;    /* Firefox */
-webkit-animation: value; /* Safari and Chrome */
-o-animation: value;    /* Opera */
-ms-animation: value;    /* IE */

If you are using a CSS compiler such as SCSS or LESS you could create a mixin for the above:

@mixin animate($val){
    animation:$val;
    -moz-animation:$val;  
    -webkit-animation:$val;
    -o-animation:$val;
    -ms-animation:$val;  
}

answered Nov 8, 2013 at 13:45

AfromanJ

3,9323 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dre Over a year ago

+1 for suggesting using a compiler. I don't go anywhere near animations unless I'm using SCSS; it's a horrendous timesuck otherwise!

Termato Over a year ago

Adding the browser prefixes fixed my problem. It's crazy to me that some elements need the prefixes and some don't (like border-radius now works without prefixes).

Chris Scott Over a year ago

Thank you so much! Was struggling with an animation that worked in codepen (sans prefixes) but frustratingly wouldn't activate when used in the 'custom css' tab of a WordPress site. This fixed it.

Romain Braun · Accepted Answer · 2013-11-08 13:57:22Z

You're probably going to have to add vendor prefixes to make it work.

-moz- is for Firefox

-webkit- is for webkit based browsers (ie Chrome)

-ms- is for microsoft (Internet Explhorror)

-o- is for Opera

Like so :

.logo{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    /*animation-delay*/
    -webkit-animation-delay:1.2s;
       -moz-animation-delay:1.2s;
        -ms-animation-delay:1.2s;
         -o-animation-delay:1.2s;
            animation-delay:1.2s;
    /*animation-duration*/
    -webkit-animation-duration:4.8s;
       -moz-animation-duration:4.8s;
        -ms-animation-duration:4.8s;
         -o-animation-duration:4.8s;
            animation-duration:4.8s;
    /*animation-iteration-count*/
    -webkit-animation-iteration-count:1;
       -moz-animation-iteration-count:1;
        -ms-animation-iteration-count:1;
         -o-animation-iteration-count:1;
            animation-iteration-count:1;
    animation-fill-mode:both;
    /*animation-name*/
    -webkit-animation-name:logo;
       -moz-animation-name:logo;
        -ms-animation-name:logo;
         -o-animation-name:logo;
            animation-name:logo;
}
.intro{
    text-align:left;
    margin-left:100px;
    margin-right:auto;
    /*animation-duration*/
    -webkit-animation-duration:5.5s;
       -moz-animation-duration:5.5s;
        -ms-animation-duration:5.5s;
         -o-animation-duration:5.5s;
            animation-duration:5.5s;
    /*animation-iteration-count*/
    -webkit-animation-iteration-count:1;
       -moz-animation-iteration-count:1;
        -ms-animation-iteration-count:1;
         -o-animation-iteration-count:1;
            animation-iteration-count:1;
    animation-fill-mode:both;
    /*animation-name*/
    -webkit-animation-name:logo;
       -moz-animation-name:logo;
        -ms-animation-name:logo;
         -o-animation-name:logo;
            animation-name:logo;
}

@keyframes logo 
{
    0%{transform: 
        translate(000px, 1500px);}
    20%
    {
        transform:translate(000px, 235px);
    }
    25%
    {
        transform:translate(000px, 265px);
    }
    65%
    {
        transform:translate(000px, 265px);
    }
    100%
    {
        transform:translate(000px, -300px);
    }
}
@-moz-keyframes logo  /* Firefox */
{
    0%{transform: 
        translate(000px, 1500px);}
    20%
    {
        transform:translate(000px, 235px);
    }
    25%
    {
        transform:translate(000px, 265px);
    }
    65%
    {
        transform:translate(000px, 265px);
    }
    100%
    {
        transform:translate(000px, -300px);
    }
}
@-webkit-keyframes logo  /* Safari and Chrome */
{
    0%{transform: 
        translate(000px, 1500px);}
    20%
    {
        transform:translate(000px, 235px);
    }
    25%
    {
        transform:translate(000px, 265px);
    }
    65%
    {
        transform:translate(000px, 265px);
    }
    100%
    {
        transform:translate(000px, -300px);
    }
}
@-o-keyframes logo  /* Opera */
{
    0%{transform: 
        translate(000px, 1500px);}
    20%
    {
        transform:translate(000px, 235px);
    }
    25%
    {
        transform:translate(000px, 265px);
    }
    65%
    {
        transform:translate(000px, 265px);
    }
    100%
    {
        transform:translate(000px, -300px);
    }
}
@-ms-keyframes logo  /* IE */
{
    0%{transform: 
        translate(000px, 1500px);}
    20%
    {
        transform:translate(000px, 235px);
    }
    25%
    {
        transform:translate(000px, 265px);
    }
    65%
    {
        transform:translate(000px, 265px);
    }
    100%
    {
        transform:translate(000px, -300px);
    }
}

@keyframes intro
{
    0% {transform:
          translate(000px, -400px);}
    65% {transform:
          translate(000px, -165px);}
    100% {transform:
          translate(000px, -135px);}
    }
}
@-moz-keyframes intro /* Firefox */
{
    0% {transform:
          translate(000px, -400px);}
    65% {transform:
          translate(000px, -165px);}
    100% {transform:
          translate(000px, -135px);}
    }
}
@-webkit-keyframes intro/* Safari and Chrome */
{
    0% {transform:
          translate(000px, -400px);}
    65% {transform:
          translate(000px, -165px);}
    100% {transform:
          translate(000px, -135px);}
    }
}
@-o-keyframes intro /* Opera */
{
    0% {transform:
          translate(000px, -400px);}
    65% {transform:
          translate(000px, -165px);}
    100% {transform:
          translate(000px, -135px);}
    }
}
@-ms-keyframes intro /* IE */
{
    0% {transform:
          translate(000px, -400px);}
    65% {transform:
          translate(000px, -165px);}
    100% {transform:
          translate(000px, -135px);}
    }
}

Thanks for answering. Added this to my code but still not an animation :(
@Drogon add the vendor prefixes to the keyframes as well. i'm going to update my answer.
Did you tested it at your place? I believe you if you say that it works for you. But for me its a little drama. Cause still not working....

jorisx · Accepted Answer · 2014-11-13 20:14:11Z

0

transform itself also needs the prefixes ...

-webkit-transform -moz-transform -o-transform transform

answered Nov 13, 2014 at 20:14

jorisx

113 bronze badges

Collectives™ on Stack Overflow

keyframes animation in html css not working

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related