I am experiencing an issue with an image that I placed on my website. Here is what I have tried.
#mysecond
{
width:100px;
height:100px;
background:none;
position:relative;
animation:mysecond 5s;
-webkit-animation:mysecond 5s; /* Safari and Chrome */
-moz-animation : mysecond 5s;
-o-animation : mysecond 5s;
animation : mysecond 5s;
}
@keyframes mysecond
{
from {
transform : scale(1.5);
opacity : 1;
}
to {
transform : scale(0);
opacity : .0;
}
}
@-webkit-keyframes {
from {
transform : scale(1.5);
opacity : 1;
}
to {
transform : scale(0);
opacity : .0;
}
}
@-moz-keyframes {
from {
transform : scale(1.5);
opacity : 1;
}
to {
transform : scale(0);
opacity : .0;
}
}
After applying this code, my intention was to make the image scale and disappear. However, it scaled and disappeared momentarily but then reappeared after the full 5 seconds. Any suggestions on what I may have done incorrectly?