CSS3 :animation] transition & keyframe..

1)
HTML5 에 나오는, transition 과 keyframe 의 특징이랄까요..
그런 부분을 서술해보고 싶었습니다. (테스트는 chrome, FireFox, opera 에서 했습니다.)

2)

<div id=v1>
  <div id=v2>
  </div>
</div>
<style>
  #v1 {
    width:400px; height:300px; overflow:hidden; position:relative; background-color:red;
    }
  #v2 {
    width:100px; height:200px; overflow:hidden; position:absolute; left:0px; top:0px; background-color:green;
    transition:left 5s, top 5s;
    -webkit-transition:left 5s, top 5s;
    -moz-transition:left 5s, top 5s;
    -o-transition:left 5s, top 5s;
    }
  #v1:hover {
    animation:color1 5s;
    -webkit-animation:color1 5s;
    -moz-animation:color1 5s;
    -o-animation:color1 5s;
    }
  #v1:hover #v2 {
    left:200px; top:100px;
    }
  @keyframes color1 {
    0% { background-color:orange; width:400px; }
    100% { background-color:blue; width:300px; }
    }
  @-webkit-keyframes color1 {
    0% { background-color:orange; width:400px; }
    100% { background-color:blue; width:300px; }
    }
  @-moz-keyframes color1 {
    0% { background-color:orange; width:400px; }
    100% { background-color:blue; width:300px; }
    }
  @-o-keyframes color1 {
    0% { background-color:orange; width:400px; }
    100% { background-color:blue; width:300px; }
    }
</style>

-- 새 창에 샘플띄우기.. --

3)

4)
원리..라고 할 부분은 :hover 부분정도이고(?),

나머지는
animation:keyframe 으로 동작하느냐,
transition 으로 동작하느냐의 차이죠.

해당 색상위에 마우스 커서가 올라가있으면

animation 은 동작을 시각에 정해둔대로(?), (바탕(?)색의 변화와, 크기변화를 참고하세요..)
transition 은 위치차를 정해진대로 실행합니다. (가운데 어설프게 이동하는 사각형을 참고하세요..)

5)
뭐랄까요..

레코드판 튀는 형태(?)는 animation 과 비슷하고,
크랭크 돌아가는 모양은 transition 과 비슷하다고 할까요..

.. animation 에 transition 을 적용하면 더 좋은 게 나올 것 같긴 하지만.. 일단,

animation 은
정해진 시각에 정해진 순서로만 움직인다..라는 결론이면 될 것 같습니다.

둘 사이의 부조화(?)를 메꾸기위해(?)
:hover 가 아닐 때에 transition 을 적용해봐야할 것 같긴 합니다만,

제 예상이 맞다면, 아직은(?) animation 의 timer 문제때문에,
튀는 현상이 완전보정은 되지 않을거라고 생각됩니다.

..

wantHate killofki@.

http://pba.kr