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 CSS - Beyond the Basics CSS Animation Basics Full-Page Animation Challenge 1

Posted by channonhall
channonhall
12,247 Points

fullpage animation challange 1 help please

can you please help me on the challenge? challenge task 2 of 2

thanks!

style.css 
/* Complete the challenge by writing CSS below */



.boat {
 -webkit-animation: rock-boat 3s ease-in-out infinite;
  animation-iteration-count: infinite;
 }


.steam {

}


/*  Keyframes
------------------------------------------ */

@-webkit-keyframes rock-boat {
    50%  { -webkit-transform: rotate(-5deg) translateY(-10px); }
}
@-moz-keyframes rock-boat {
    50%  { -webkit-transform: rotate(-5deg) translateY(-10px); }
}
@keyframes rock-boat {
    50%  { -webkit-transform: rotate(-5deg) translateY(-10px); }
}

@-webkit-keyframes steam {
    40%,
    60%  { opacity: 1; }
    100% { -webkit-transform: translate(-15%, -35%) rotateZ(20deg); }
}
@-moz-keyframes steam {
    40%,
    60%  { opacity: 1; }
    100% { -webkit-transform: translate(-15%, -35%) rotateZ(20deg); }
}
@keyframes steam {
    40%,
    60%  { opacity: 1; }
    100% { -webkit-transform: translate(-15%, -35%) rotateZ(20deg); }
}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Animations</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="boat">
        <img class="steam" src="http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/steam.png" alt="steam">
        <img src="http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/boat.png" alt="tugboat">
    </div>
    <img class="mike" src="http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/mike.png">
</body>
</html>

1 Answer

Justin Iezzi
Justin Iezzi
18,199 Points
Justin Iezzi
Justin Iezzi
18,199 Points

Hey Channon,

It's pretty much the same thing you've done with the boat rule. Step 2 wants us to set the steam animation on the .steam selector, so we write -

.steam {
-webkit-animation: steam;
}

Now it's asking us to give the animation a 4 second duration, we specify this with the duration value -

.steam {
-webkit-animation: steam 4s;
}

Then we need to give it a 2 second delay. According to the MDN we can specify the delay as the next value -

.steam {
-webkit-animation: steam 4s 2s;
}

And finally we need to simply give the animation an iteration count, which we can also add to the animation property -

.steam {
-webkit-animation: steam 4s 2s 6;
}

Of course, you have write out all the properties, which is fine too, like this -

.steam {
-webkit-animation: steam;
-webkit-animation-duration: 4s;
-webkit-animation-delay: 2s;
 -webkit-animation-iteration-count: 6;
}

Hope this helps!

channonhall
channonhall
12,247 Points

Thanks! that helps alot!