CODEWITHSUNDEEP
csscss-animations
tx291
tx291

Reputation: 1331

translateY not working

I'm working with CSS3 animations, and I cannot get "translate Y" to work! In the code below, the opacity animations and everything else works just fine, so I know the animation is being triggered. But for some reason, the translateY will not take place. I've tried using "text-transform" instead of just "transform", and I've tried writing "-webkit-transform", as well. I also tried using a 0 in the coordinates, so it would be "translateY(0,10px)" Right now, I'm just working in Chrome.

Does anything look fishy here? If anyone has any ideas, I'd be super grateful! Here's the CSS:

    .contulmenufirst{
   -webkit-animation: contulmenu 2.5s;
   -webkit-animation-fill-mode: forwards;
   }

   @-webkit-keyframes contulmenu{
    0%{
    opacity:0;          
    }

   25%{
    transform:translateY(10px);
    }

   50%{
    transform:translateY(20px);
     }
    75%{
    transform:translateY(50px);
    }
    100%{
    opacity:1;
    }
    }

Upvotes: 3

Views: 12109

Answers (1)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

I am not sure why it is not working, I put your tanslateY into a fiddle an it works as expected, maybe a syntax error that I did not catch?

here is the fiddle https://jsfiddle.net/avocyf33/13/

 div {
    width: 100px;
    height: 100px;

    border-color: red;
    border-style: solid;
    position :relative;
    -webkit-animation: mymove 5s infinite;
    animation: mymove 5s infinite;
}
@-webkit-keyframes mymove {
   0%{opacity:0;}
   25%{transform:translateY(10px);}
   50%{transform:translateY(20px);}
   75%{transform:translateY(50px);}
   100%{opacity:1;}
}

Upvotes: 1

Related Questions