« »
3/24/2010

Spritely in PURE CSS3

(Disclaimer: I've tried in an entirely week-end to animate birds using only CSS3 but without great success... sorry about that).

1) animate the clouds (#clouds):
@-webkit-keyframes animClouds{
0% {background-position: 0px 102px; }
100% {background-position: -1068px 102px; }
}

#clouds {
-webkit-animation-name: animClouds;
-webkit-animation-duration: 70s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;

/* is the same as */
-webkit-animation:animClouds 70s linear 0s infinite;
}

2) animate the hills (#hill2 & #hill1):
@-webkit-keyframes animHill2{
from {background-position: 0px 258px; }
to {background-position: -1110px 258px; }
}

@-webkit-keyframes animHill1{
0% {background-position: 0px 104px; }
100% {background-position: -2220px 104px; }
}

#hill2{
-webkit-animation: animHill2 25s linear 0s infinite;
}

#hill1 {
-webkit-animation: animHill1 25s linear 0s infinite;
}


And that's all ! Check the demos here (Safari/Chrome only): Demo 1 Demo 2

« »
 
 
Made with on a hot august night from an airplane the 19th of March 2017.