Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Adam Smallman
Adam Smallman
318 Points

Help with CSS3 animation rotation

Hi guys, so I am trying to create a simple repeat animation of a spaceship. Its going fine so far, but when I need it to rotate the image will start to rotate as it moves.

If that makes any sense!

I need it to move to a point without rotating, once it is at that point then rotate and move to another point and so on.

But the image will rotate as it moves the point.

Here is the small amount of code.

@-webkit-keyframes myfirst { 10% {top: -20%; left: 10%;} 20% {transform: rotate(-200deg);}

}

Tyler Dix
Tyler Dix
14,230 Points

Hi Adam,

You can add delays in your animation. When you bind the "myfirst" keyframe function to your animation, the first number will indicated the delay before the animation starts. Here's an example of the short-hand:

.someClass {
  -webkit-animation: myfirst 6s 2s infinite;
}

This blinded animation will delay by 6 seconds, then run in 2-second iterations infinitely.

I hope this helps.

Tyler