I am facing an issue with the animations on my webpage. The first animation seems to be working fine in Firefox, but the last one is not working at all. Can someone help me identify what might be causing this problem? Is there something that I have overlooked?
CSS:
#container {
width:300px;
height: 250px;
/*overflow:hidden;*/
}
#image{
display: block;
width: 300px;
height: 250px;
float:left;
position: relative;
}
h1{
color: #aaba38;
font-size: 26px;
font-weight: bold;
}
#title{
position: relative;
-webkit-animation: mailigen 20s infinite; /* Chrome, Safari, Opera */
animation: mailigen 20s infinite;
}
#slide{
float:left; position: relative; width:200px; text-align:right;
position: relative;
-webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
-moz-animation: mymove 20s infinite;
-o-animation: mymove 20s infinite;
animation: mymove 20s infinite;
}
#slide2{
position: relative;
-webkit-animation: mymove2 20s infinite; /* Chrome, Safari, Opera */
-moz-animation: mymove2 20s infinite;
-o-animation: mymove2 20s infinite;
animation: mymove2 20s infinite;
}
...
.circle3 span {
color: #ffffff;
font-family: Arial;
font-size: 23px;
left: 40px;
position: relative;
font-weight: bold;
text-transform: uppercase;
top: 37px;
text-align: center ;
}