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

davide totaro
davide totaro
5,559 Points
Posted by davide totaro
davide totaro
5,559 Points

Next, bind the steam animation to the .steam selector. Give the animation a 4 second duration, a 2 second delay, and set

help

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

.boat {
  -webkit-animation: rock-boat 3s infinite;

}

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

}


/*  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

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Davide, it looks like there's something else you need to do as your question looks incomplete. So rather than guess I looked into the challenge for you. :-)

All you need to do is set the animation shorthand property as you did for the .rock-boat selector, making sure you call the animation name as one of your values.

But you're almost there, :-)