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 stevencooper
stevencooper
5,755 Points

I am having trouble binding keyframes to selectors

I am supposed to: Using the prefix for WebKit-based browsers, create a property that will bind the keyframe sequence below to the .prog-bar selector.

I am given this html:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Animations</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrap">
        <div class="prog-bar"></div>
    </div>
</body>
</html>

and a barebones CSS stylesheet:

.prog-bar {

}

/* keyframes */

@-webkit-keyframes slide {
    0%  { width:     0%; }
    30%,
    60%     { width:   50%; }
    70% { width:   80%; }
    100%    { width: 100%; }
}

Now, I've looked at the video transcript and the video's several times, and nothing is said about binding keyframes to the prog-bar.

The instructional video & transcript show this to be the only CSS reference to the prog-bar...

.prog-bar {
    height: 60px;
    border-radius: 5px;
    background: -webkit-repeating-linear-gradient (-45deg, rgba(255,255,255,.1), rgba(255,255,255,0) 12px), -webkit-linear-gradient (#f5a8a8, #f08080);
}

the section /keyframes/ goes pretty much as shown above.

Any suggestions? Ideas? hints?

Thanks to all that help.

1 Answer

Dustin Matlock
Dustin Matlock
33,856 Points

Hi Steven, you can bind the keyframe with -webkit-animation-name. Let me know if you get it, and if not, I'll provide a little more information for you.