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 Keyframe Rules and Animation Properties: WebKit Only

Posted by Ashley Scott
Ashley Scott
6,426 Points

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

Andrea Zupanc
PLUS
Andrea Zupanc
Courses Plus Student 2,483 Points
Andrea Zupanc
Andrea Zupanc
Courses Plus Student 2,483 Points

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....

Ashley Scott
Ashley Scott
6,426 Points

thank you and it did make sense

Richard Duncan
Richard Duncan
5,568 Points
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;
}
Ashley Scott
Ashley Scott
6,426 Points

I am still confused

Ashley Scott
Ashley Scott
6,426 Points
Ashley Scott
Ashley Scott
6,426 Points

i still don't understand

Richard Duncan
Richard Duncan
5,568 Points
Richard Duncan
Richard Duncan
5,568 Points

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

Ashley Scott
Ashley Scott
6,426 Points

how do i do that

Richard Duncan
Richard Duncan
5,568 Points
Richard Duncan
Richard Duncan
5,568 Points

With @-webkit-keyframes shown in my answer.

Ashley Scott
Ashley Scott
6,426 Points

Where do i put the animation name?

Brenna Leker
Brenna Leker
7,596 Points
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; }