CSS Animation and Transform

Question

I am not sure why the transform: translateX is not working on my animation. I am trying to move a div 100px and then backwards to the starting spot.

Here is a fiddle: http://jsfiddle.net/tWnRb/

Here is my HTML:

<div></div>

Here is my CSS:

div {
  width: 200px;
  height: 200px;
  background: coral;
  -webkit-animation: squareToCircle 2s 1s infinite alternate;

}

-webkit-keyframes squareToCircle {
  0% {
    border-radius: 0 0 0 0;
    background: coral;
    -webkit-transform: translateX(0px);
  }
  25% {
    border-radius: 50% 0 0 0;
    background: darksalmon;
    -webkit-transform: translateX(50px);
  }
  50% {
    border-radius: 50% 50% 0 0;
    background: hotpink;
    -webkit-transform: translateX(100px);
  }
  75% {
    border-radius: 50% 50% 50% 0;
    background: lightcoral;
    -webkit-transform: translateX(50px);
  }
  100% {
    border-radius: 50% 50% 50% 50%;
    background: darksalmon;
    -webkit-transform: translateX(0px);
  }
}

you missed the @ before -keyframes jsfiddle.net/viphalongpro/tWnRb/6 — King King
– King King, Commented Jun 12, 2014 at 13:10

DreamTeK · Accepted Answer · 2014-06-12 13:17:21Z

3

keyframes need to be prefixed with @

DEMO

@-webkit-keyframes NAME-YOUR-ANIMATION { }
@-moz-keyframes NAME-YOUR-ANIMATION { }
@-o-keyframes NAME-YOUR-ANIMATION { }
@keyframes NAME-YOUR-ANIMATION { }

You also should accomodate other browsers as well as webkit.

edited Jun 12, 2014 at 13:17

answered Jun 12, 2014 at 13:11

DreamTeK

34.6k30 gold badges127 silver badges180 bronze badges

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

2 Comments

Mdd Over a year ago

Thank you! I did not realize it needed the @

Mdd Over a year ago

Thanks again! I will add the vendor prefixes, I just left them off to make the example code easier to debug :)

Dave Briand · Accepted Answer · 2014-06-12 13:10:33Z

1

http://jsfiddle.net/tWnRb/5/

-webkit-keyframes squareToCircle {

to

@-webkit-keyframes squareToCircle {

answered Jun 12, 2014 at 13:10

Dave Briand

1,7441 gold badge16 silver badges16 bronze badges

2 Comments

Mdd Over a year ago

Thanks! I did not realize the @ was needed! Small syntax errors always seem to get me when i'm tyring to learn something new. Thanks again!

Dave Briand Over a year ago

go with Obsidion's answer - his is more complete

Collectives™ on Stack Overflow

CSS Animation and Transform

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related