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

Keegan McGinnis
Keegan McGinnis
6,286 Points
Posted by Keegan McGinnis
Keegan McGinnis
6,286 Points

Hey guys, for some reason my progress bar stays black and dosent do anything. Can anyone help?

Heres the CSS.

body{
    background: #303030;
    font: 1.1em, sans-serif;
}


.wrap{
    box-sizing: border-box;
    margin: 70px auto;
    padding: 5px;
    width: 600px;
    border-radius: 10px;
    background: #222;
    box-shadow: inset 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.1);
}


.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);
    -webkit-animation-name: slide;
    -webkit-animation-duration: 2s;
}



/***************** Keyframe Rules ******************/

@-webkit-keyframes slide{
    from{ width: 0% }
    to{ width: 100%;}
}
John Mutch
John Mutch
6,962 Points

I opened it in codepen in FireFox and had no animation. I was just a black bar.

dariorancatore
dariorancatore
6,845 Points

Apart of the semicolon I use chrome v. 39 and it works using the same code! ;)

2 Answers

kkswecpsyl
kkswecpsyl
8,155 Points
kkswecpsyl
kkswecpsyl
8,155 Points

For anyone having problems with this first try the code in Google Chrome it should work.

If you then want it to work in firefox just remove all -webkit prefixes. E.g.

body {
    background: #303030;
    font: 1.1em sans-serif;
}
.wrap {
    box-sizing: border-box;
    margin: 70px auto;
    padding: 5px;
    width: 600px;
    border-radius: 10px;
    background: #222;
    box-shadow: inset 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.1);
}
.prog-bar {
    height: 60px;
    border-radius: 5px;
    background: repeating-linear-gradient(-45deg, rgba(255,255,255,.1), rgba(255,255,255,0) 12px), linear-gradient(#F5A8A8, #F08080);

    animation-name: slide;
    animation-duration: 2s;
} 

/*  Keyframes
------------------------------------------ */

@keyframes slide {
    from {width:0%; }
    to   {width:100%;}
}
thomascawthorn
thomascawthorn
22,986 Points
  • or keep both lines (one prefixed, one not) to cover both browsers ;)
thomascawthorn
thomascawthorn
22,986 Points
thomascawthorn
thomascawthorn
22,986 Points

I can only see one thing different from the video - and that's a semi colon after the from {width: 0% } but that shouldn't change anything. have you tried on multiple browsers? i.e. is this compatible with the browser you're testing on?