에니메이션 만들어 사용하기

에니메이션을 각 동작 시간별(%)로 나눠서 만들어 놓고, 요소에 적용을 시킬 수 있음

▼ ex) a 링크 앞에 위치한 폰트 아이콘을 hover 시 한바퀴 회전시킴 (스케일도 약간 키움)

.blog-entry-details h2 a:hover:before {
    -webkit-animation-name: rotateThis;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: rotateThis;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-name: rotateThis;
    -ms-animation-duration: 1s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease-in-out;
    animation-name: rotateThis; /* 따로 정의 필요!!! */
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes rotateThis {
    0% { -webkit-transform: scale(1) rotate(0); }
    10% { -webkit-transform: scale(1.1) rotate(0); }
    90% { -webkit-transform: scale(1.1) rotate(360deg); }
    100% { -webkit-transform: scale(1) rotate(360deg); }
}
@-moz-keyframes rotateThis {
    0% { -moz-transform: scale(1) rotate(0); }
    10% { -moz-transform: scale(1.1) rotate(0); }
    90% { -moz-transform: scale(1.1) rotate(360deg); }
    100% { -moz-transform: scale(1) rotate(360deg); }
}
@-ms-keyframes rotateThis {
    0% { -ms-transform: scale(1) rotate(0); }
    10% { -ms-transform: scale(1.1) rotate(0); }
    90% { -ms-transform: scale(1.1) rotate(360deg); }
    100% { -ms-transform: scale(1) rotate(360deg); }
}
@keyframes rotateThis {
    0% { transform: scale(1) rotate(0); }
    10% { transform: scale(1.1) rotate(0); }
    90% { transform: scale(1.1) rotate(360deg); }
    100% { transform: scale(1) rotate(360deg); }
}