@keyframes 'bounce' { from { top: 100px; animation-timing-function: ease-out; } 25% { top: 50px; animation-timing-function: ease-in; } 50% { top: 100px; animation-timing-function: ease-out; } 75% { top: 75px; animation-timing-function: ease-in; } to { top: 100px; } } @-webkit-keyframes flowouttoleft { 0% { -webkit-transform: translateX(0) scale(1); } 60%, 70% { -webkit-transform: translateX(0) scale(.7); } 100% { -webkit-transform: translateX(-100%) scale(.7); } } div { animation-name: 'diagonal-slide'; animation-duration: 5s; animation-iteration-count: 10; } @keyframes 'diagonal-slide' { from { left: 0; top: 0; } to { left: 100px; top: 100px; } }