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 Unused CSS Stages CSS Animations Full-Page Animation Project 1: WebKit Only

Donald McLamb
Donald McLamb
2,867 Points
Posted by 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
Donald McLamb
Donald McLamb
2,867 Points

I switched to chrome for this exercise.

Andrew Molloy
Andrew Molloy
37,259 Points
Andrew Molloy
Andrew Molloy
37,259 Points

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
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.

Daniel Lee
Daniel Lee
7,809 Points
Daniel Lee
Daniel Lee
7,809 Points

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.