애니메이션 중간중간 방향 또는 크기 등과같은 변화가 있는 지점을 keyframes라고 한다. animation 동작 중 hover가일어나면 동작 멈춤 .ball:hover { animation-play-state: paused; } Animation Event - animationstart - animationend - animationiteration - animationcancel 애니메이션 과정 요소를 브라우저에 그리기위해 계산된 결과를 가지고 레이아웃 구성 이때 이 요소가 레이어가될지 그냥 계산을 통해 움직임을 줄건지 결정된다. transform, opacity는 보통 레이어로 작동된다. 하지만 top, left, width, border, background 등과 같은 요소는 레이어가 아니어서 ..

duration - 초단위 transition time function - ease(default) - ease-in - ease-out - ease-in-out - linear transition property(값 자체가 숫자 value인 것들만 적용) - transform - background-color - width - height - etc.. delay(값만큼 지연되었다가 재생) - 초단위 박스 클릭시 오른쪽으로 1초간 300px 좌우 이동하며 색상 coral에서 블루로 변경 transition: 1s 2s; 일땐 2초 delay 색상에는 transition을 안주고 transform에만 주고싶다면 transition: transform 1s; transform, background에 각각..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

Transform // 호버하면 크기 2배로 커짐 .box:hover { transform: scale(2); } .box:hover { transform: scale(2); transform-origin: left top;//왼쪽 탑 기준 scale up // percent로 줄수있음 transform-origin: 0% 20%; } // 호버하면 크기 2배로 커지고 15도 돌려줌 .box:hover { transform: scale(2) rotate(15deg); } // 호버하면 30비틀어줌 .box:hover { transform: skew(30deg); // 수평(가로)방향 transform: skewY(30deg); // 수직(세로)방향 } // 이동 .box:hover { transform:..