body { background-color:#4E4226; } #container { position:relative; height:700px; width:500px; margin:50px auto; overflow:hidden; border:4px solid #5C090A; background:#4E4226 url('https://webkit.org/blog-files/leaves/images/backgroundLeaves.jpg') no-repeat top left; } #leafContainer { position:absolute; width:100%; height:100%; } #message { position:absolute; top:160px; width:100%; height:300px; background:transparent url('https://webkit.org/blog-files/leaves/images/textBackground.png') repeat-x center; color:#5C090A; font-size:220%; font-family:'Georgia'; text-align:center; padding:20px 10px; box-sizing:border-box; background-size:100% 100%; z-index:1; } p { margin:80px 15px; } a { color:#5C090A; text-decoration:none; } em { font-weight:bold; font-style:normal; } .phone { font-size:150%; vertical-align:middle; } #leafContainer>div { position:absolute; width:100px; height:100px; animation-iteration-count:infinite,infinite; animation-direction:normal,normal; animation-timing-function:linear,ease-in; } #leafContainer>div>img { position:absolute; width:100px; height:100px; animation-iteration-count:infinite; animation-direction:alternate; animation-timing-function:ease-in-out; transform-origin:50% -100%; } @keyframes fade { 0% { opacity:1; } 90% { opacity:0.7; } 100% { opacity:0; } }@keyframes drop { 0% { transform:translate(0px,-50px); } 100% { transform:translate(0px,650px); } }@keyframes clockwiseSpin { 0% { transform:rotate(-50deg); } 100% { transform:rotate(50deg); } }@keyframes counterclockwiseSpinAndFlip { 0% { transform:scale(-1,1) rotate(50deg); } 100% { transform:scale(-1,1) rotate(-50deg); } }