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

Shannon Yeh
Shannon Yeh
8,987 Points
Posted by Shannon Yeh
Shannon Yeh
8,987 Points

CSS Animations Last Challenge

I have no idea what to do here since I tried to bind using the -webkit-animation: bg-move

here is the question:

Using the prefix for WebKit-based browsers, bind the 'bg-move' animation to the body selector. Give it an 8 second duration, then set it so that the final keyframe continues to apply after the animation sequence has completed.

here is the code provided:

body {

}
.mike {

}
.boat {
    -webkit-animation: rock-boat 3s ease infinite;
}
.steam {
    -webkit-animation: steam 4s 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% -220px; }
    100% { background-position: -350% -220px; }
}
@-webkit-keyframes mike-float {
    50% { -webkit-transform: rotateZ(5deg) translateY(-5px); }
}

9 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hey Bernardo Bonança,

Looks like you wrote -webkik-animation instead of -webkit-animation

Bernardo Bonança
Bernardo Bonança
10,773 Points
Bernardo Bonança
Bernardo Bonança
10,773 Points

Oh man... now I'm just embarassed. Thank you.

I'll be a better student from now on, I promise hahaha

Awkward Guil Hernandez video outro (You know... that gesture you do. I lol'ed the first time.)

Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Haha! No worries, Bernardo Bonança, it happens to all of us. :)

Davor Budimir
Davor Budimir
9,206 Points
Davor Budimir
Davor Budimir
9,206 Points

solution:

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

Marc Sanchez
Marc Sanchez
20,039 Points
Marc Sanchez
Marc Sanchez
20,039 Points

Andras, if you're still having this issue, try using the short-hand method. -webkit-animation: bg-move 8s infinite forwards; It worked for me.

Hope that helps.

Bernardo Bonança
Bernardo Bonança
10,773 Points
Bernardo Bonança
Bernardo Bonança
10,773 Points

I'm having this problem.

It tells me the animation name is incorrect.

"Using the prefix for WebKit-based browsers, bind the 'bg-move' animation to the body selector. Give it an 8 second duration, then set it so that the final keyframe continues to apply after the animation sequence has completed."

/* Complete the challenge by writing CSS below */


body {
    -webkik-animation: bg-move 8s forwards;
}
.mike {

}
.boat {
    -webkit-animation: rock-boat 3s ease infinite;
}
.steam {
    -webkit-animation: steam 4s 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% -220px; }
    100% { background-position: -350% -220px; }
}
@-webkit-keyframes mike-float {
    50% { -webkit-transform: rotateZ(5deg) translateY(-5px); }
}
Bernardo Bonança
Bernardo Bonança
10,773 Points
Bernardo Bonança
Bernardo Bonança
10,773 Points

Well I copied and pasted the same exact code from another forum post and it seems to work now.

No idea what was that all about.

Shannon Yeh
Shannon Yeh
8,987 Points
Shannon Yeh
Shannon Yeh
8,987 Points

for some reason the -webkit-animation-fill-mode: is grayed out.... i dont know what to do 

body {
-webkit-animation: bg-move 8s infinite;
-webkit-animation-fill-mode: foward; 
)
Shannon Yeh
Shannon Yeh
8,987 Points
Shannon Yeh
Shannon Yeh
8,987 Points

keeps saying my fill mode isnt correct?

Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Shannon Yeh,

If you're still having issues with the fill-mode, it's because it needs to be forwards. You currently have it as foward.

Hope this helps.

Gergely Marton
Gergely Marton
27,180 Points
Gergely Marton
Gergely Marton
27,180 Points

i chedk it double checked it infinite check it, fill mode is grayed out dosen`t work .... body { -webkit-animation: bg-move 8s infinite; animation-fill-mode:forwards }

Gergely Marton
Gergely Marton
27,180 Points
Gergely Marton
Gergely Marton
27,180 Points

i mean -webkit-animation: bg-move 8s infinite; -webkit-animation-fill-mode: forwards