HTML and CSS Reference
In-Depth Information
87% {background-image:url("images/moon8.png");}
100% {background-image:url("images/moon1.png");}
}
@@keyframes moonPhases
{
0% {background-image:url("images/moon1.png");}
12% {background-image:url("images/moon2.png");}
25% {background-image:url("images/moon3.png");}
37% {background-image:url("images/moon4.png");}
50% {background-image:url("images/moon5.png");}
62% {background-image:url("images/moon6.png");}
75% {background-image:url("images/moon7.png");}
87% {background-image:url("images/moon8.png");}
100% {background-image:url("images/moon1.png");}
}
#moon
{
width:115px;
height:115px;
background-image: url("images/moon1.png");
background-repeat: no-repeat;
-webkit-animation-name:moonPhases;
-webkit-animation-duration:4s;
-webkit-animation-delay:3s;
-webkit-animation-iteration-count:10;
animation-name:moonPhases;
animation-duration:4s;
animation-delay:3s;
animation-iteration-count:10;
}
</style>
