DevSSOM

Animation Transition의 경우는 마우스를 오버했을 때와 같은 특정 조건이 필요한데, 조건에 상관 없이 이벤트를 적용할 때 사용하는 것이 Animation. 예를 들어, 웹사이트에 접속을 하자마자 마우스 움직임과 상관없이 오브젝트가 회전을 한다던가 움직인다던가 하는 효과를 만들 때 애니메이션을 사용함. .animation { animation-name: changeWidth; animation-duration: 3s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: 6; animation-direction: alternate; } @keyframes changeWidth { from { wid..

Transition 특정 조건 하에서 변화하는 과정을 애니메이션으로 보여주고자 할 때 사용. 예를 들어, 박스에 마우스 오버를 했을 때, 흰색에서 파란색으로 변하게 하고 싶은데 갑자기 휙휙 변하는 게 아니라, 변화하는 과정 자체가 드러나는 자연스러운 변화를 주고자 할 때 트랜지션을 씀. 트랜지션의 각각의 속성값들을 하나하나 알아보면 Property, duration Property은 변화하는 과정을 주고자하는 CSS속성을 작성할 때 사용. 위에서는 width값이 바뀌는 과정을 사용자에게 보여주겠다는 뜻. duration은 바뀌는 과정을 얼만큼의 소요시간으로 보여줄 것인지 정할 때 사용. 위에서는 width값을 바꾸는 데에 2초의 시간을 쓰겠다는 뜻. timing-function, delay timing-..