CSS/애니메이션 (5) 썸네일형 리스트형 스크롤에 반응하는 애니메이션을 만드는 방법 스크롤을 움직여 아이템이 나타났을 때 특정 애니메이션 효과를 주려면 AOS 라이브러리를 쓰는 게 편하다. michalsnik.github.io/aos/ 3D transform 예제 before hover .box { width: 200px; height: 200px; background: dodgerblue; } .box:hover { transform: perspective(200px) rotateY(45deg); transform-origin: 0 50%; } perspective는 화면을 바라보는 사용자와 box의 거리를 의미한다. transform-origin을 위처럼 설정해야 왼쪽 모서리를 축으로 설정할 수 있다. CSS 트랜스폼을 이용한 트랜지션 예제 1. 버튼 div { width: 100px; height: 100px; background-color: mistyrose; transition-property: transform; transition-duration: 300ms; transform: scale(1); } div:hover { transform: scale(1.1); /* 마우스를 올려 놓을 때 크기가 부드럽게 살짝 커진다. */ } 2. 시계 div { width: 100px; height: 100px; position: relative; background-color: antiquewhite; /* 아래 정의한 keyframes를 가져온다. 여럿을 지정할 수도 있다. */ animation-name: rotate; animation-.. CSS 애니메이션 예제 div { width: 100px; height: 100px; position: relative; background-color: antiquewhite; /* 아래 정의한 keyframes를 가져온다. 여럿을 지정할 수도 있다. */ animation-name: move; animation-duration: 3s; animation-iteration-count: infinite; /* 반복 횟수 */ } @keyframes move { 0% { left: 0; } 50% { left: 300px; } 100% { left: 0; } } /* 아래와 같이 할 수도 있다. */ @keyframes move { from { left: 0; } /* 0에서 300px로 */ to { left: 300px; }.. CSS 트랜지션 예제 마우스를 올려 놓고 내릴 때 애니메이션을 주는 방법이다. div { width: 100px; height: 100px; background-color: mistyrose; /* width와 background-color에 transition을 준다. */ transition-property: width, background-color; /* 변화 속도를 지정한다. */ transition-duration: 1s, 2s; } /* 마우스를 엘리먼트 위에 올려 놓을 때 */ div:hover { width: 200px; background-color: honeydew; } 참고 : https://poiemaweb.com/css3-transition 이전 1 다음
