:root {
--animation-time: 12s;
--x-position: 200px;
--drop-distance: 4000px;
}
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
background-image: url("images/GardenTopView-SouthCrop.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
color: #FFFFFF;
}
.grow img {
transition: .5s ease;
}
.grow img:hover {
-webkit-transform: scale(4.5);
-ms-transform: scale(4.5);
transform: scale(4.5);
transition: .5s ease;
}
.fallingDonkey span {
display: inline-block;
width: 80px;
height: 80px;
margin: -280px 60px 54px -34px;
background:url("images/Wee-donkey-small.png");
-webkit-animation: fallingDonkey var(--animation-time) infinite linear;
-moz-animation: fallingDonkey var(--animation-time) infinite linear;
}
@-webkit-keyframes fallingDonkey {
0% {
opacity: 1;
#xposjs {-webkit-transform: translate(var(--x-position), 0px) rotateZ(0deg);}
}
75% {
opacity: 1;
-webkit-transform: translate(var(--x-position), calc((var(--drop-distance)/4)*3)) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(var(--x-position), var(--drop-distance)) rotateZ(360deg);
}
}