CSS Keyframe Issue

Question

I created a simple CSS animation. In the fiddle I believe all of the properties are correct but no animation is happening. Please help me understand what I am doing wrong. I am attaching some sample code and the jsfiddle below. Thanks.

@-moz-keyframes til {
    0%   { margin-top: -200px; }
    20%  { margin-top: -198px; }
    35%  { margin-top: -196px; }
    50%  { margin-top: -194px; }
    75%  { margin-top: -196px; }
    80%  { margin-top: -198px; }
    100% { margin-top: -200px; }
}
@-o-keyframes til {
    0%   { margin-top: -200px; }
    20%  { margin-top: -198px; }
    35%  { margin-top: -196px; }
    50%  { margin-top: -194px; }
    75%  { margin-top: -196px; }
    80%  { margin-top: -198px; }
    100% { margin-top: -200px; }
}
@keyframes til {
    0%   { margin-top: -200px; }
    20%  { margin-top: -198px; }
    35%  { margin-top: -196px; }
    50%  { margin-top: -194px; }
    75%  { margin-top: -196px; }
    80%  { margin-top: -198px; }
    100% { margin-top: -200px; }
}
/*-------------------Animation Keyframes------------------------*/

.one {
    z-index: 5;
    -webkit-animation: til 2s ease-in infinite; /* Safari 4+ */
    -moz-animation: til 2s ease-in infinite; /* Fx 5+ */
    -o-animation: til 2s ease-in infinite; /* Opera 12+ */
    animation: til 2s ease-in infinite; /* IE 10+ */
    width: 100%;
    height: 300px;
    background: url(http://galnova.com/diabetescrush/img/mob/wave.png) no-repeat;        
    background-position: center;
    margin-top: -200px;
}

Here is the fiddle. http://jsfiddle.net/galnova/pnk0j8gv/9/

Are you applying that only the top item is animating and the other stay still? — Piotr Dajlido
– Piotr Dajlido, Commented Mar 19, 2015 at 19:49

GolezTrol · Accepted Answer · 2015-03-19 19:46:12Z

2

Are you testing in Chrome or Safari? You do have a -webkit-animation property, but no -webkit-keyframes. Once you add that, things start moving (maybe not correctly, but at least they do).

Fiddle

answered Mar 19, 2015 at 19:46

GolezTrol

116k19 gold badges185 silver badges215 bronze badges

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

1 Comment

riotgear Over a year ago

Thank you. Yes. I forgot the webkit!

Piotr Dajlido · Accepted Answer · 2015-03-19 20:04:18Z

First things first..

You seem to be using inefficiently the key-fames system. There is no need to apply margin-top while for your solution the -webkit-transform:translate(Xpx, Ypx); will work just fine.

-webkit-transform:translate will aplly the translation to the current position of your elements, without need to fix the values in keyframes.

Next is compatibility, check this W3 table for e.g. http://www.w3schools.com/css/css3_2dtransforms.asp

Here is a working example ( tested on mozilla ) with all the elements moving: http://jsfiddle.net/urahara/pnk0j8gv/14/

Wow this is amazing. I am still trying to figure out how you condensed it so much. Thank you!

Collectives™ on Stack Overflow

CSS Keyframe Issue

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related