Below is the code I'm using for my animation:
<div id="slider" style="width: 230px; height: 150px; padding:5px">
<div id="mask">
<ul style="list-style:none;">
<li class='firstAnimation'>
<h2>First Word</h2>
</li>
<li class="secondAnimation" style="color: red;">
<h2><strong>Second Word</strong></h2>
</li>
<li class="thirdAnimation">
<h2><strong>Third Word</strong></h2>
</li>
</ul>
</div>
</div>
Here's my CSS code for the animation:
.slider {
max-width: 300px;
height: 200px;
margin: 20px auto;
position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/3.jpg)no-repeat center;
background-size: cover;
animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;
}
.slide2 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/3.jpeg)no-repeat center;
background-size: cover;
animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
.slide3 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/3.jpg)no-repeat center;
background-size: cover;
animation:fade3 8s infinite;
-webkit-animation:fade3 8s infinite;
}
@keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
@keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
@keyframes fade3
{
0% {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}
The animation works fine on IE10, Firefox, and Opera, but it's not functioning properly on Chrome. I've tried to implement the code from this source. Any constructive suggestions would be greatly appreciated. Thank you in advance.