Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Unused CSS Stages CSS Animations Keyframe Rules and Animation Properties: WebKit Only

Help!!

My question says Using the prefix for WebKit-based browsers, create a property that will bind the keyframe sequence below to the .prog-bar selector. I need help and thank you in advanced.

4 Answers

I had the same problem and finally figured it out - it is :

.prog-bar { -webkit-animation: slide 1s ease infinite; }

you call the animation with webkit-animation: and the animation name is slide, which you is @-webkit-keyframes slide => and that means you need to use slide as your animation name.

Sorry I'm really bad in explaining it but I hope it helps....

thank you and it did make sense

Richard Duncan
Richard Duncan
5,568 Points

The below code shows you how to create a keyframes animation with the webkit prefix and then how to call that animation in the class .prog-bar.

The syntax is @-webkit-keyframes, followed by the animation name. The animation call in prog-bar is shorthand meaning it will run the animation "myAnimation" over the duration of 1 second in a linear transition an infinite number of times.

All being well you can adapt this to your needs.

@-webkit-keyframes myAnimation {
   0% {
     /* Something here */
   }

   100% {
      /* Something here */
   }
}

.prog-bar {
   animation: myAnimation 1s linear infinite;
}

I am still confused

i still don't understand

Richard Duncan
Richard Duncan
5,568 Points

You are basically defining an animation by name which you call later on the class.

how do i do that

Richard Duncan
Richard Duncan
5,568 Points

With @-webkit-keyframes shown in my answer.

Where do i put the animation name?

Brenna Leker
Brenna Leker
7,596 Points

The animation name goes after the declaration -webkit-animation: In this example "slide" is the name of the animation so it would be:

.prog-bar { -webkit-animation:slide; }