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 Project: Part 2

jsdevtom
jsdevtom
16,963 Points
Posted by jsdevtom
jsdevtom
16,963 Points

Why is my background not animating?

as far as I can see, my code is exactly the same:

Here is a CodePen or you can also view the files below. For some reason, the CodePen, which has exactly the same code, animates neither the background nor the steam. Really. Confused.

------ EDIT------- Found what is causing the issue: the

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

works only when I remove the vendor prefix. But why??

animation.css

/*  Animations - WebKit only
------------------------------------------ */
.boat {
  -webkit-transform-origin: 50% 50%;
  -webkit-animation: rock-boat 2s linear infinite;

}

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

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


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

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);
    -ms-transform: rotateZ(-5deg);
    transform: rotateZ(-5deg);
}

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>

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

It depends on what browser you are using, and sometimes what version. I notice the comment in the CSS file you included above does say WebKit only.

It's been a while since I took this course myself, but I believe elsewhere in the videos there is a discussion about how the names for animation properties differ between browsers. I know most real-life code that uses these features will have multiple lines for each property, each using a different browser's name for the property. That way, the code will work in all browser varieties.

But for expedience, I guess some portion of the videos only show the example in the style appropriate the the instructor's browser.