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!

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

Stuart McPherson
Stuart McPherson
15,939 Points
Posted by Stuart McPherson
Stuart McPherson
15,939 Points

Image slider wont work in IE?

I've found an image slider on the internet and and have adapted it to suit my page. It works in Chrome, FF and IE11 but no other versions of IE?

My animation progress bar which signals when the image will change over is working but the image doesn't move or change over.

index.html 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Home</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/responsive.css">
  <link rel="stylesheet" href="css/slider.css">
  <link href="https://fonts.googleapis.com/css?family=Muli%7CRoboto:400,300,500,700,900" rel="stylesheet">
  </head>
  <body>

    <nav>
        <label for="show-menu" class="show-menu">Show Menu</label>
        <input type="checkbox" id="show-menu" role="button">
        <ul id="menu">
          <li><a href="home.html" class="selected">Home</a></li>
          <li><a href="info.html">Who We Are</a></li>
          <li><a href="whatwedo.html">What We Do</a></li>
          <li><a href="faq.html">FAQ</a></li>
          <li><a href="news.html">News</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li><a href="members.html">Members</a></li>
        </ul>
      </nav>
    </header>

    <div class="container">
      <div id="content-slider">
         <div id="slider">  <!-- Slider container -->
           <div id="mask">  <!-- Mask -->

             <ul>
               <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
               <a href="img/banner-team.jpg" target=_blank> <img src="img/banner-team.jpg" alt="Banner1"/> </a>
               <div class="tooltip"> <h1>Banner Team</h1> </div>
               </li>

               <li id="second" class="secondanimation">
               <a href="img/banner-team.jpg" target=_blank> <img src="img/banner-team.jpg" walt="Banner2"/> </a>
               <div class="tooltip"> <h1>Banner Team</h1> </div>
               </li>

               <li id="third" class="thirdanimation">
               <a href="img/banner-team.jpg" target=_blank> <img src="img/banner-team.jpg" alt="Banner3"/> </a>
               <div class="tooltip"> <h1>Banner Team</h1> </div>
               </li>

               <li id="fourth" class="fourthanimation">
               <a href="img/banner-team.jpg" target=_blank> <img src="img/banner-team.jpg" alt="Banner1"/> </a>
               <div class="tooltip"> <h1>Banner Team</h1> </div>
               </li>

               <li id="fifth" class="fifthanimation">
               <a href="img/banner-team.jpg" target=_blank> <img src="img/banner-team.jpg" alt="Banner2"/> </a>
               <div class="tooltip"> <h1>Banner Team</h1> </div>
               </li>

             </ul>

          </div>  <!-- End Mask -->
          <div class="progress-bar"></div>  <!-- Progress Bar -->
        </div>  <!-- End Slider Container -->
      </div>
    </div>

  </body>
</html>
slider.cs 
/* SLIDER */
#slider {
    background:#000;
    border:5px solid #eaeaea;
    box-shadow:1px 1px 5px rgba(0,0,0,0.7);
    height:400px;
    width: 80%;
  margin-left: 10%;
  margin-right: 10%;
    margin:40px auto 0;
    overflow:visible;
    position:relative;
}

/* HIDE ALL OUTSIDE OF THE SLIDER */
#mask {
    overflow:hidden;
    height:390px;
}

/* IMAGE LIST */
#slider ul {
    margin:0;
    padding:0;
    position:relative;
  text-align: center; 
}
#slider li {
    width:100%;
    height:400px;
    position:absolute;
    list-style:none;
  top: -325px;
  display: inline-block;
  margin-left: -1000px;
}

#slider li img {
  margin: 0 auto;
}

/* animations */

#slider li.firstanimation {
    -moz-animation:cycle 30s linear infinite;   
    -webkit-animation:cycle 30s linear infinite;    
  -ms-transition: cycle 30s linear infinite;
  -o-transition: cyclethree 30s linear infinite;
  transition: cyclethree 30s linear infinite;
}
#slider li.secondanimation {
    -moz-animation:cycletwo 30s linear infinite;
    -webkit-animation:cycletwo 30s linear infinite; 
  -ms-transition: cyclethree 30s linear infinite;
  -o-transition: cyclethree 30s linear infinite;
  transition: cyclethree 30s linear infinite;
}
#slider li.thirdanimation {
    -moz-animation:cyclethree 30s linear infinite;
    -webkit-animation:cyclethree 30s linear infinite;
  -ms-transition: cyclethree 30s linear infinite;
  -o-transition: cyclethree 30s linear infinite;
  transition: cyclethree 30s linear infinite;
}
#slider li.fourthanimation {
    -moz-animation:cyclefour 30s linear infinite;
    -webkit-animation:cyclefour 30s linear infinite;
  -ms-transition: cyclefour 30s linear infinite;
  -o-transition: cyclethree 30s linear infinite;
  transition: cyclethree 30s linear infinite;
}
#slider li.fifthanimation {
    -moz-animation:cyclefive 30s linear infinite;
    -webkit-animation:cyclefive 30s linear infinite;
  -ms-transition: cyclefive 30s linear infinite;
  -o-transition: cyclethree 30s linear infinite;
  transition: cyclethree 30s linear infinite;
}

/* tooltip */
#slider .tooltip {
    background:rgba(0,0,0,0.7);
    width:300px;
    height:60px;
    position:relative;
    bottom:100px;
    left:-320px;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;  
  -ms-transition: all 0.3s ease-in-out;  
  -o-transition: all 0.3s ease-in-out; 
  transition: all 0.3s ease-in-out; 
}

#slider .tooltip h1 {
    color:#fff;
    font-size:24px;
    font-weight:300;
    line-height:60px;
    padding:0 0 0 20px;
}

#slider li#first:hover .tooltip, 
#slider li#second:hover .tooltip, 
#slider li#third:hover .tooltip, 
#slider li#fourth:hover .tooltip, 
#slider li#fifth:hover .tooltip {
    left: 12.5%;
}

@media screen and (max-width: 1870px) {
  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 16.5%;
  }

}

@media screen and (max-width: 1770px) {
  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 21%;
  }

}

@media screen and (max-width: 1670px) {
  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 25%;
  }

}

@media screen and (max-width: 1570px) {
  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 30%;
  }

}

@media screen and (max-width: 1470px) {
  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 36%;
  }

}

@media screen and (max-width: 1370px) {
  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 42%;
  }

}

@media screen and (max-width: 1270px) {
  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 49%;
  }

}

@media screen and (max-width: 1180px) {
  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 56.5%;
  }

}

@media screen and (max-width: 1100px) {
  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 64.5%;
  }

}

@media screen and (max-width: 1030px) {
  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 73%;
  }

}

@media screen and (max-width: 960px) {
  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 82%;
  }

}

@media screen and (max-width: 890px) {
  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 93%;
  }

}

@media screen and (max-width: 820px) {
  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 104.5%;
  }

}  

@media screen and (max-width: 760px) {
  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 117%;
  }

}  

@media screen and (max-width: 700px) {
  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 131%;
  }

}    

@media screen and (max-width: 660px) {

  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 143.5%;
  }

}   

@media screen and (max-width: 610px) {

  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 157%;
  }

}   

@media screen and (max-width: 570px) {

  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 173%;
  }

}   

@media screen and (max-width: 530px) {

  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 190.5%;
  }

}  

@media screen and (max-width: 530px) {

  #slider li#first:hover .tooltip, 
  #slider li#second:hover .tooltip, 
  #slider li#third:hover .tooltip, 
  #slider li#fourth:hover .tooltip, 
  #slider li#fifth:hover .tooltip {
    left: 206.5%;
  }

}  

@media screen and (max-width: 465px) {

  #slider .tooltip {
    display: none;   
  }


}  

/* stop slide on hover */
#slider:hover li, 
#slider:hover .progress-bar {
    -moz-animation-play-state:paused;
    -webkit-animation-play-state:paused;
  -ms-animation-play-state:paused;
  -o-animation-play-state:paused;
  animation-play-state:paused;
}

/* PROGRESS BAR */
.progress-bar { 
    position:relative;
    top:-5px;
    width:100%; 
    height:5px;
    background:#72bcd4;
    -moz-animation:fullexpand 30s ease-out infinite;
    -webkit-animation:fullexpand 30s ease-out infinite;
  -ms-animation: fullexpand 30s ease-out infinite;
  -o-animation: fullexpand 30s ease-out infinite;
  animation: fullexpand 30s ease-out infinite;
}

/* ANIMATION */
@-moz-keyframes cycle {
    0%  { top:0px; } /* When you start the slide, the first image is already visible */
    4%  { top:0px; } /* Original Position */
    16% { top:0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
    20% { top:325px; opacity:0; z-index:0; } /* From 16% to 20% = for 1 second exit image */
    21% { top:-325px; opacity:0; z-index:-1; } /* Return to Original Position */
    92% { top:-325px; opacity:0; z-index:0; }
    96% { top:-325px; opacity:0; } /* From 96% to 100% = for 1 second enter image*/
    100%{ top:0px; opacity:1; }

}
@-moz-keyframes cycletwo {
    0%  { top:-325px; opacity:0; } /* Original Position */
    16% { top:-325px; opacity:0; } /* Starts moving after 16% to this position */
    20% { top:0px; opacity:1; }
    24% { top:0px; opacity:1; } /* From 20% to 24% = for 1 second enter image*/
    36% { top:0px; opacity:1; z-index:0; } /* From 24% to 36 % = for 3 seconds the image is visible */
    40% { top:325px; opacity:0; z-index:0; } /* From 36% to 40% = for 1 second exit image */
    41% { top:-325px; opacity:0; z-index:-1; } /* Return to Original Position */
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
    0%  { top:-325px; opacity:0; }
    36% { top:-325px; opacity:0; }
    40% { top:0px; opacity:1; }
    44% { top:0px; opacity:1; } 
    56% { top:0px; opacity:1; } 
    60% { top:325px; opacity:0; z-index:0; }
    61% { top:-325px; opacity:0; z-index:-1; } 
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
    0%  { top:-325px; opacity:0; }
    56% { top:-325px; opacity:0; }
    60% { top:0px; opacity:1; }
    64% { top:0px; opacity:1; }
    76% { top:0px; opacity:1; z-index:0; }
    80% { top:325px; opacity:0; z-index:0; }
    81% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
    0%  { top:-325px; opacity:0; }
    76% { top:-325px; opacity:0; }
    80% { top:0px; opacity:1; }
    84% { top:0px; opacity:1; }
    96% { top:0px; opacity:1; z-index:0; }
    100%{ top:325px; opacity:0; z-index:0; }
}

@-webkit-keyframes cycle {
    0%  { top:0px; }
    4%  { top:0px; }
    16% { top:0px; opacity:1; z-index:0; } 
    20% { top:325px; opacity:0; z-index:0; }
    21% { top:-325px; opacity:0; z-index:-1; }
    50% { top:-325px; opacity:0; z-index:-1; }
    92% { top:-325px; opacity:0; z-index:0; }
    96% { top:-325px; opacity:0; }
    100%{ top:0px; opacity:1; }

}
@-webkit-keyframes cycletwo {
    0%  { top:-325px; opacity:0; }
    16% { top:-325px; opacity:0; }
    20% { top:0px; opacity:1; }
    24% { top:0px; opacity:1; } 
    36% { top:0px; opacity:1; z-index:0; } 
    40% { top:325px; opacity:0; z-index:0; }
    41% { top:-325px; opacity:0; z-index:-1; }  
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
    0%  { top:-325px; opacity:0; }
    36% { top:-325px; opacity:0; }
    40% { top:0px; opacity:1; }
    44% { top:0px; opacity:1; } 
    56% { top:0px; opacity:1; z-index:0; } 
    60% { top:325px; opacity:0; z-index:0; } 
    61% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
    0%  { top:-325px; opacity:0; }
    56% { top:-325px; opacity:0; }
    60% { top:0px; opacity:1; }
    64% { top:0px; opacity:1; }
    76% { top:0px; opacity:1; z-index:0; }
    80% { top:325px; opacity:0; z-index:0; }
    81% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
    0%  { top:-325px; opacity:0; }
    76% { top:-325px; opacity:0; }
    80% { top:0px; opacity:1; }
    84% { top:0px; opacity:1; }
    96% { top:0px; opacity:1; z-index:0; }
    100%{ top:325px; opacity:0; z-index:0; }
}

@-ms-keyframes cycle {
    0%  { top:0px; }
    4%  { top:0px; }
    16% { top:0px; opacity:1; z-index:0; } 
    20% { top:325px; opacity:0; z-index:0; }
    21% { top:-325px; opacity:0; z-index:-1; }
    50% { top:-325px; opacity:0; z-index:-1; }
    92% { top:-325px; opacity:0; z-index:0; }
    96% { top:-325px; opacity:0; }
    100%{ top:0px; opacity:1; }

}
@-ms-keyframes cycletwo {
    0%  { top:-325px; opacity:0; }
    16% { top:-325px; opacity:0; }
    20% { top:0px; opacity:1; }
    24% { top:0px; opacity:1; } 
    36% { top:0px; opacity:1; z-index:0; } 
    40% { top:325px; opacity:0; z-index:0; }
    41% { top:-325px; opacity:0; z-index:-1; }  
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-ms-keyframes cyclethree {
    0%  { top:-325px; opacity:0; }
    36% { top:-325px; opacity:0; }
    40% { top:0px; opacity:1; }
    44% { top:0px; opacity:1; } 
    56% { top:0px; opacity:1; z-index:0; } 
    60% { top:325px; opacity:0; z-index:0; } 
    61% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-ms-keyframes cyclefour {
    0%  { top:-325px; opacity:0; }
    56% { top:-325px; opacity:0; }
    60% { top:0px; opacity:1; }
    64% { top:0px; opacity:1; }
    76% { top:0px; opacity:1; z-index:0; }
    80% { top:325px; opacity:0; z-index:0; }
    81% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-ms-keyframes cyclefive {
    0%  { top:-325px; opacity:0; }
    76% { top:-325px; opacity:0; }
    80% { top:0px; opacity:1; }
    84% { top:0px; opacity:1; }
    96% { top:0px; opacity:1; z-index:0; }
    100%{ top:325px; opacity:0; z-index:0; }
}

@-o-keyframes cycle {
    0%  { top:0px; }
    4%  { top:0px; }
    16% { top:0px; opacity:1; z-index:0; } 
    20% { top:325px; opacity:0; z-index:0; }
    21% { top:-325px; opacity:0; z-index:-1; }
    50% { top:-325px; opacity:0; z-index:-1; }
    92% { top:-325px; opacity:0; z-index:0; }
    96% { top:-325px; opacity:0; }
    100%{ top:0px; opacity:1; }

}
@-o-keyframes cycletwo {
    0%  { top:-325px; opacity:0; }
    16% { top:-325px; opacity:0; }
    20% { top:0px; opacity:1; }
    24% { top:0px; opacity:1; } 
    36% { top:0px; opacity:1; z-index:0; } 
    40% { top:325px; opacity:0; z-index:0; }
    41% { top:-325px; opacity:0; z-index:-1; }  
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-o-keyframes cyclethree {
    0%  { top:-325px; opacity:0; }
    36% { top:-325px; opacity:0; }
    40% { top:0px; opacity:1; }
    44% { top:0px; opacity:1; } 
    56% { top:0px; opacity:1; z-index:0; } 
    60% { top:325px; opacity:0; z-index:0; } 
    61% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-o-keyframes cyclefour {
    0%  { top:-325px; opacity:0; }
    56% { top:-325px; opacity:0; }
    60% { top:0px; opacity:1; }
    64% { top:0px; opacity:1; }
    76% { top:0px; opacity:1; z-index:0; }
    80% { top:325px; opacity:0; z-index:0; }
    81% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-o-keyframes cyclefive {
    0%  { top:-325px; opacity:0; }
    76% { top:-325px; opacity:0; }
    80% { top:0px; opacity:1; }
    84% { top:0px; opacity:1; }
    96% { top:0px; opacity:1; z-index:0; }
    100%{ top:325px; opacity:0; z-index:0; }
}

@keyframes cycle {
    0%  { top:0px; }
    4%  { top:0px; }
    16% { top:0px; opacity:1; z-index:0; } 
    20% { top:325px; opacity:0; z-index:0; }
    21% { top:-325px; opacity:0; z-index:-1; }
    50% { top:-325px; opacity:0; z-index:-1; }
    92% { top:-325px; opacity:0; z-index:0; }
    96% { top:-325px; opacity:0; }
    100%{ top:0px; opacity:1; }

}
@keyframes cycletwo {
    0%  { top:-325px; opacity:0; }
    16% { top:-325px; opacity:0; }
    20% { top:0px; opacity:1; }
    24% { top:0px; opacity:1; } 
    36% { top:0px; opacity:1; z-index:0; } 
    40% { top:325px; opacity:0; z-index:0; }
    41% { top:-325px; opacity:0; z-index:-1; }  
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@keyframes cyclethree {
    0%  { top:-325px; opacity:0; }
    36% { top:-325px; opacity:0; }
    40% { top:0px; opacity:1; }
    44% { top:0px; opacity:1; } 
    56% { top:0px; opacity:1; z-index:0; } 
    60% { top:325px; opacity:0; z-index:0; } 
    61% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@keyframes cyclefour {
    0%  { top:-325px; opacity:0; }
    56% { top:-325px; opacity:0; }
    60% { top:0px; opacity:1; }
    64% { top:0px; opacity:1; }
    76% { top:0px; opacity:1; z-index:0; }
    80% { top:325px; opacity:0; z-index:0; }
    81% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@keyframes cyclefive {
    0%  { top:-325px; opacity:0; }
    76% { top:-325px; opacity:0; }
    80% { top:0px; opacity:1; }
    84% { top:0px; opacity:1; }
    96% { top:0px; opacity:1; z-index:0; }
    100%{ top:325px; opacity:0; z-index:0; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
  /* In these keyframes, the progress-bar is stationary */
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
  /* In these keyframes, the progress-bar starts to come alive */
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
  /* In these keyframes, the progress-bar moves forward for 3 seconds */
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
  /* In these keyframes, the progress-bar has finished his path */
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
  /* In these keyframes, the progress-bar will disappear and then resume the cycle */
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }   
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }   
}

@-ms-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }   
}

@-o-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }   
}

@keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }   
}

1 Answer

Ran ShemTov
Ran ShemTov
14,148 Points
Ran ShemTov
Ran ShemTov
14,148 Points

It just might be that some IE versions won't support the latest animations or other cool css features. Be sure to check if what you're using has support for all browsers before you choose an effect to add in your website. Usually the developers of these features state if IE supports it or not.

Here's a support table for you to use: http://www.w3schools.com/cssref/css3_browsersupport.asp