Home/ Questions/Q 8486489
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T20:57:32+00:00

welp.. I used to have css3 animation that worked on my google chrome but

  • 0

welp.. I used to have css3 animation that worked on my google chrome but for some
reason it stopped working. i tried to create an example based on that code.

I have no clue why it doesn’t work anymore.. any information would be greatly appreciated.

<html>
<head>
<style type="text/css">
div
{
 width:100px;
 height:100px;
 background:red;
 -webkit-transition: all .5s ease;
 -webkit-animation-name: bounceup;
 -webkit-animation-duration: 1.5s;
}

@-webkit-keyframes bounceup {
    from {
    opacity:0.5;
    -webkit-transform: translateY(100px) rotate(180deg);
    -webkit-box-shadow: 20px 20px 80px #000;
    }
    to {
    opacity:1;
    -webkit-transform: translateY(0px) rotate(0deg);
    }
}


</style>
</head>
<body>

<div></div>

</body>
</html>

as you can see it’s a keyframes based animation using the ‘from’ and to’ methods.

welp the result here that I just see a red box with no animation what so ever.

thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    For some reason, the animation doesn’t like the order of translateY(0px), so if you move it, it will work fine: http://jsfiddle.net/joshnh/zJ5A9/

    • 0