DevSSOM

Transform & Animation .box1 { animation: rotation 1500ms linear infinite alternate; } @keyframes rotation { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } } box1 이라고 하는 영역에 애니메이션 속성을 입력함. 속성값들을 한 줄로 입력했는데, 각각의 순서는 상관없지만 항상 먼저 나오는 숫자가 duration이고, 나중에 나오는 숫자가 delay라는 것만 알면 됨. 위에서는 rotation이라고 하는 애니메이션 이름을 지정하고, duration은 1500ms라고 해서 (1000ms = 1초) 1.5초 동안 동작하게, linear로 일정한 속도를..

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..