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: Part 3

Gustavo Santana
PLUS
Gustavo Santana
Courses Plus Student 4,267 Points
Posted by Gustavo Santana
Gustavo Santana
Courses Plus Student 4,267 Points

Cant seem to get mike to show up...

Hello everyone, I have just finished CSS animations but found that I still had a problem. While I followed the video exactly and went back to check it a few more times just to make sure, I cannot seem to realize what it is I have failed to do to make mike come into the animation after the boat stops.

I am currently editing my code on sublime. I am using Google Chrome browser.

Here is the code.

Here is index.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>

Here is main.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);
    -moz-transform: rotateZ(-5deg);
    -o-transform: rotateZ(-5deg);
    -ms-transform: rotateZ(-5deg);
    transform: rotateZ(-5deg);
}

Here is animation.css:

/*  Animations - WebKit only
------------------------------------------ */

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

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

body {
    -webkit-animation: bg-move 8s ease-out forwards;
}

.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-position:  100% -560px;}
    100% {background-position: -350% -460px;}
}

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

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

Thank you for your time.

3 Answers

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Hey, I figured it out! You are missing the hyphen before your last two keyframe webkit declarations.

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

It looks like your code is the same. Have you checked your image path to mike.png? That seems to be the only explanation I can think of for that not showing.

Gustavo Santana
Gustavo Santana
Courses Plus Student 4,267 Points
Gustavo Santana
Gustavo Santana
Courses Plus Student 4,267 Points

Hello Chris,

Mike appears on the image if I make the chrome window small enough. You can see him just to the left of the boat. What he wont do is appear on the screen via CSS. The path seems to be correct based on this and I have not changed the structure of the files at all.

Thanks,

Gustavo

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Did you figure it out? If so, let us know what you did to fix it. It may help others on here.

Gustavo Santana
Gustavo Santana
Courses Plus Student 4,267 Points
Gustavo Santana
Gustavo Santana
Courses Plus Student 4,267 Points

Hey Chris,

I have not figured it out. I was more meaning ignore this particular comment.(not sure how to delete it)

Gustavo