css animation2 css animation 총정리 (transition, transform, translate, animation, @keyframes) 이름과 효과가 비슷비슷해서 사용할 때마다 헷갈리고 막막해서 '나' 그리고 나와 같은 사람들을 위해 총정리해보았습니다. animation ⊃ @keyframes ⊃ transition = transform ⊃ translate animation이 있어야 @keyframes를 사용할 수 있고, @keyframes안에 transition과 transform에 대한 다양한 효과들을 디테일하게 설정할 수 있으며, translate는 단순 transform method 중 하나로 x축, y축에 대한 이동을 나타내는 것뿐입니다. (animation은 전체 효과들을 어떻게 사용할지, @keyframes는 animatino이 실행되는 동안 어떤 타이밍에 어떤 효과를 줄지 더 디테일하게 설정이 가능하게 하고 좀 더 자연스.. 2019. 5. 26. css animation 1. CSS에서 animation이란? css에서 animation이란, 하나의 element가 다른 상태로 서서히 변하게 하는 것을 말합니다. 다양한 속성들을 사용해서 원하는 변화를 줄 수 있습니다. animation을 사용하기 위해서는 우선적으로 키프레임(keyframes)을 정의해야 합니다. keyframes란 언제 어떤 animation을 줄지 설정하는 것을 말합니다. 2. @keyframes 사용법 @keyframes animation-name{ } 형식으로 작성합니다. 여기서 'animation-name'속성은 해당 요소(element)와 keyframes를 연결하는 역할을 합니다. ex) @keyframes widthChange{ from { width:100% } 선방향 animation-.. 2019. 5. 21. 이전 1 다음
