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 Charlie Person
Charlie Person
8,692 Points

How to achieve multiple css animations on one element?

For some reason I cannot get this code to work. I'm trying to rotate this object 360 degrees (which works fine) AND change the opacity from 0.8 to 1. Not sure what I'm doing wrong. Please help!! (in Sass)

 div {
    text-align: center;
    height: 100%;
    padding-top: 5%;
    opacity: .8;
    .pan:hover {
        -webkit-animation: turn 1s forwards;
    }
 }


@-webkit-Keyframes turn {
    100%    {opacity: 1;}
    100%    {-webkit-transform: rotateZ(-360deg);}
}

1 Answer

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Charlie,

By default all keyframes start from 0% which is where we define our base CSS styles for the element, these styles shouldn't be attempting to alter the element in any way yet as they are to prevent the element from misbehaving once the animation is complete.

The end or 100% is where you would define your style changes for the element, in this code block you would set properties such as opacity and they will take effect for the set animation time, see the below link for an example which I put together quickly that demonstrates this.

http://codepen.io/ChrisUpjohn/pen/wBoevQ

Charlie Person
Charlie Person
8,692 Points

Chris- people like you are the reason treehouse is so freaking great. Thank you so much for taking the time to do that. I'll pay it forward. GOT IT!!!! THANK YOU!