Bind the bg-move animation to the body selector. Give the animation an 8 second duration. Set it so that the final keyfr

Question

anyone can help me

style.css

/* Complete the challenge by writing CSS below */

body {
  -webkit-animation: bg-move 8s infinite;

}
.mike {

}
.boat {
  animation: rock-boat 3s ease infinite;
}
.steam {
  animation: steam 4s 2s infinite;
}

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

@keyframes rock-boat {
    50%  { -webkit-transform: rotate(-5deg) translateY(-10px); }
}
@keyframes steam {
    40%,
    60%  { opacity: 1; }
    100% { -webkit-transform: translate(-15%, -35%) rotateZ(20deg); }
}
@keyframes bg-move {
    0%   { background-position:  100% -220px; }
    100% { background-position: -350% -220px; }
}
@keyframes mike-float {
    50% { -webkit-transform: rotateZ(5deg) translateY(-5px); }
}

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>

Answer 1 · 2015-04-22T14:08:04Z

April 22, 2015 2:08pm

body {
  animation: bg-move 8s infinite;
  animation-fill-mode: forwards;
}

Welcome to the Treehouse Community

Looking to learn something new?

davide totaro

davide totaro

Bind the bg-move animation to the body selector. Give the animation an 8 second duration. Set it so that the final keyfr

1 Answer

Lin Lu

Lin Lu

jsdevtom

jsdevtom