애니메이션(animation) [Jquery, CSS]

공부/Jquery,CSS  2016.03.22 03:30

안녕하세요. 명월입니다.


이번 포스트는 애니메이션에 대해 공부를 하겠습니다. 애니메이션 태그는 이전에 포스팅했던 트랜지션과 비슷하고 효과도 비슷하네요.
차이점이라고 하면 트랜지션은 정해진 요소 스타일, 예로 left를 왼쪽으로 오른쪽으로 이동하던가 color를 blue에서 red로 변환하던 가의 정해진 요소에 반응한다고 하면 animation은 복합적인 표현이 가능한 요소입니다.
복합적이라고 하면 예를 들면 div를 어디로 이동하면서 색을 변환하면서 글자 크기를 변환한다 식의 복합적인 변환입니다.
저 같은 경우는 애니메이션을 써본 적도 없지만 앞으로도 많이 쓰는 요소가 될 것 같지 않네요. 저는 왠지 화려하면 거부감이 들어서...ㅎㅎ
그럼 어떤 요소가 있는지 예제를 통해 공부하겠습니다.



애니메이션 요소를 살펴보면 예전 트랜지션과 거의 비슷하네요...
animation-name는 애니메이션의 프로퍼티를 지정할 수 있습니다. 애니메이션 프로퍼티는 「@keyframes 프로퍼티이름」형식으로 작성할 수 있습니다.
프로퍼티를 보니 0% 50% 100%의 표현이 있는데 이는 0%는 애니메이션 초기 형태 100%는 완료되었을 때의 형태라고 하면 50%는 duration의 걸리는 시간의 50%의 상태를 말합니다. 즉, 3초이니 1.5초에는 50%의 형태가 되는 것입니다.
그리고 delay는 몇 초 후에 애니메이션이 실행되는지의 대한 스타일입니다.
animation-timing-function는 트랜지션과 마찬가지로 변화 주기의 옵션으로 linear는 일정한 속도, ease-in은 느려지는 속도 ,ease-out은 빨라지는 속도, ease-in-out은 빨라졌다 느려졌다 빨라지는 속도, cubic-bezier(n,n,n,n) 직접 속도지정이 있습니다.
그리고 fill-mode는 애니메이션이 끝났을 때의 형태인데 저 같은 경우는 반복(animation-iteration-count)을 선택했기 때문에 이게 의미가 없어졌지만 animation-iteration-count가 없다고 하면 100%의 형태로 아이콘이 남겠습니다.
animation-iteration-count는 반복횟수로서 저는 무한 반목을 선택했고 animation-direction 경우는 애니메이션 흐름 형태입니다. 저는 100% -> 0%로 반대로 움직이게 했습니다.
마지막으로 hover 위에 state 형태인데 이는 마우스가 올라가면 잠시 멈추는 효과가 있습니다.


안녕하세요.명월입니다.


위 예제는 실제 포스트에 적용했으니 확인해 보시기 바랍니다.


이 애니메이션 역시 트랜지션과 마찬가지로 웹의 정적 이미지에 동적인 느낌을 주는 감초 같은 역할을 합니다. 그러나 많이 사용하게 되면 콘텐츠의 집중도를 떨어트리고 지저분해지는 역효과도 있으니 적절하게 잘 사용하시면 되겠습니다.


댓글 0개가 달렸습니다.
댓글쓰기