CSS - 동적 애니메이션 예제

이 예제는 두 개의 GIF 이미지를 사용하고 있습니다. <Road Runner> 제목에 마우스를 올리면 이미지가 움직입니다.

<style>
.texxx {
  font-size:60px;
  font-family:calibri;
  cursor:pointer;
  transition:all 0.2s;
  display:inline-block;
}

.texxx:hover {
  transform:skew(-20deg,0);
  -webkit-transform:skew(-20deg,0);
  -moz-transform:skew(-20deg,0);
  -o-transform:skew(-20deg,0);
  margin-left:10px;
}

.canvas {
  background:white;
  box-shadow:0 20px 100px #777 inset;
  width:600px;
  display:block;
  height:150px;
  border-radius:20px;
  border:2px solid #ddd;

  transition:
    background 2s 1s,
    box-shadow 2s 1s,
    border-color 2s 1s;
}

.road-runner { 
  width: 123px;
  height: 57px;
  background-repeat: no-repeat;

  /*This is the base64 URI image (static GIF)*/
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3A9B031Pd_ARuiOh6CJ2K64UFXVP9amug4WyctgCP29iQHXF_DSX9YsHufgCD86SbgDfYx0JhtirfGcnPbfOyt91AqAlG44tzN9Fus4EFNkbbXImQ9SNYf-_pA9MYY51KcF7GDjmaKow/s1600/transition01.gif);
  margin:80px 0px 10px 20px;
  transform:skew(30deg,0);
  -webkit-transform:skew(30deg,0);
  -moz-transform:skew(30deg,0);
  -o-transform:skew(30deg,0);

  transition:    
    margin 2s 0.5s,
    transform 2s 1s;
  -webkit-transition:
    margin 2s .5s,
    -webkit-transform 2s 1s;
  -moz-transition:
    margin 2s .5s,
    -moz-transform 2s 1s;
  -o-transition:
    margin 2s .5s,
    -o-transform 2s 1s;
}

.texxx:hover + .canvas > .road-runner {

  /*This is the base64 URI image (animated GIF)*/
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVqw6cZgb7IlZT5AvySIWaAo5tl1UkdXk5qEkHA0EN4mqPxmwpZLM9IbeqQFsnIvUYEWzaR76Dd2s5V9ZfKnTOu4lD_dBjIbw0tmmKLlibTr9eU19oPzMRda703pOl_3ksmLHTV2ICj1g/s1600/transition02.gif);
  transform:skew(-45deg,0);
  -webkit-transform:skew(-45deg,0);
  -moz-transform:skew(-45deg,0);
  -o-transform:skew(-45deg,0);
  margin-left: 510px;
}

.texxx:hover + .canvas {
  background:#008dd3;
  box-shadow:0 20px 100px #000 inset;
  border-color:#000;
}
</style>

<div class='texxx'>Road Runner</div>
<div class='canvas'>
  <div class='road-runner'></div>
</div>

Road Runner

참고: monkeyraptor.johanpaul.net