Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Unused CSS Stages CSS Animations Full-Page Animation Project 1: WebKit Only

Donald McLamb
Donald McLamb
2,867 Points

Full Page Animation Part 2 and 3, Issue with background animation

My background animation is not moving. Not sure why it looks correct to me, I have been having issues with the animations for after part 2. When I go to do the objectives I pass though.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Tugboat Animation</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="animation.css">
</head>
<body>
    <div class="boat">
        <img src="img/boat.png" alt="tugboat">
    </div>
    <img class="mike" src="img/mike.png">
</body>
</html>
CSS

body {
    background: #F0FCFF url('img/island.png') repeat-x 100% -460px;
    background-size: 780px;
}
.boat {
    width: 380px;
    position: absolute;
    top: 40%;
    left: 35%;
}
.boat img {
    width: 100%;
}
.boat::after {
    content: "";
    display: block;
    width: 120px;
    height: 120px;
    background: url('img/steam.png') no-repeat;
    background-size: 120px;
    position: absolute;
    top: -25%;
    left: 5%;
    opacity: 0;
}
.mike {
    width: 180px;
    position: absolute;
    top: 55%;
    left: -15%;
    -webkit-transform: rotateZ(-5deg);
}
CSS 

/*  Animations - WebKit only
------------------------------------------ */
body{
    -webkit-animation: bg-move 8s ease-out forwards;
}

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

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

 .mike{
    -webkit-animation: mike-move 6s 6s ease-out forwards;
                        mike-float 3.2s infinite;   

} 


/*  Keyframes - WebKit only
------------------------------------------ */

@-webkit-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); }
}

@-webkit-keyframes bg-move {
    0% { background-postion: 10% -560px; }
    100% { background-postion: -350% -460px; }
}



@-webkit-keyframe mike-move {
    100%{ left: 12%}
}

@-webkit-keyframe mike-float {
    50%{ -webkit-transform: rotateZ(5deg) translateY(-5px);}
}

3 Answers

Donald McLamb
Donald McLamb
2,867 Points

I switched to chrome for this exercise.

The line with "mike-move 6s 6s ease-out forwards;" is stopping the line after it from running, if I replace it all with just "-webkit-animation: mike-float 3s infinite;" the mike animation runs. Your code for the body runs when I try it and the boat animation should run even without the code changes/additions to the challenge. If you're not seeing any animation running I suggest trying firefox to see if there's a problem with your browser settings (make sure chrome is up to date and do a settings reset also).

Donald McLamb
Donald McLamb
2,867 Points

Thanks for looking at it. I had a lot of typos, I should switch editors or something.

keyframe instead of keyframes

CSS


@-webkit-keyframe mike-move {
    100%{ left: 12%}
}

@-webkit-keyframe mike-float {
    50%{ -webkit-transform: rotateZ(5deg) translateY(-5px);}
}

No semi-colon after 12%;

CSS

@-webkit-keyframe mike-move {
    100%{ left: 12%}
}

Postion!, what was I thinking

CSS

@-webkit-keyframes bg-move {
    0% { background-postion: 10% -560px; }
    100% { background-postion: -350% -460px; }
}

It works now, Thanks again.

Are you using the right browser if I remember correctly It says webkit only which means you have to use the browser that supports the prefix of -webkit which is chrome in this case.