Использование ключевых идей анимации: предварительные и заключительные события

Демонстрация использования предварительных и заключительных событий анимаций CSS3, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<img src="http://thenewcode.com/assets/images/thumbnails/merida.jpg" alt="Merida" id="merida">

CSS

img#merida {
    width: 30%;
    margin-left: 5%;
    border-radius: 6px;
    overflow: hidden;
    display: block;
    box-shadow: 6px 6px 8px rgba(0,0,0,0.2);
    transition: all 1.3s cubic-bezier(0.500, -0.440, 0.670, 1.475);
}
img#merida:hover {
	transform: translateX(200%);
}