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 1

marsha spell
PLUS
marsha spell
Courses Plus Student 5,555 Points
Posted by marsha spell
marsha spell
Courses Plus Student 5,555 Points

plzz help

Challenge task 2 of 2

Using the prefix for WebKit-based browsers, bind the steam animation to the .steam selector. Give it a 4 second duration, a 2 second delay, and set it to repeat infinitely.

here is my code. -webkit-animation: steam 4s 2s infinite;

not sure why its not working?? here is the link http://teamtreehouse.com/library/css-foundations/css-animations/-fullpage-animation-project-1-webkit-only thanks!

ā€¢ CSS

Geoffrey Powell
Geoffrey Powell
15,358 Points
Geoffrey Powell
Geoffrey Powell
15,358 Points

To pass the challenge, declare the animation-iteration-count of 'infinite' on its own line.

2 Answers

Michelle Pepe
Michelle Pepe
Courses Plus Student 6,125 Points

answer is body { -webkit-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); } }

channonhall
channonhall
12,247 Points

that animation is crazy

Jordan Osmond
Jordan Osmond
7,020 Points
Jordan Osmond
Jordan Osmond
7,020 Points

Try the long version:

.steam { -webkit-animation: steam; -webkit-animation-duration: 4s; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; }

Hope that helps!

Michelle Pepe
Michelle Pepe
Courses Plus Student 6,125 Points

Doesn't work Jordan.