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 John Simmons
John Simmons
1,247 Points

CSS Animation reversal/continuation

Hello treehouse community

I have a plus sign (+) that when clicked rotates 45 degrees (effectively becoming an X). What I would like to happen is on each click, the element becomes a plus again. Basically each click rotates the element to either a + or an X.

I have coded the first animation so far, but I am not sure where to go from here. I'm thinking of 2 possible solutions. Either, each click rotates the element 45 degrees or the first click rotates it 45 degrees and the second one rotates it -45 degrees and so forth.

Here is a codepen of what I have so far that will probably be easier to understand. http://codepen.io/johndavidsimmons/pen/mEKgdw

Any tips or suggestions would be greatly appreciated!

1 Answer

Matt Brock
Matt Brock
28,330 Points

Hey John.

The easiest way is to use jQuery's .toggleClass() method and a CSS transition. An animation is too beefy for a simple rotation transform. Check out this pen I made to see what I mean.