CSS/애니메이션
CSS 트랜스폼을 이용한 트랜지션 예제
Socratone
2020. 4. 3. 16:21
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-duration: 60s;
animation-timing-function: linear;
animation-iteration-count: infinite; /* 반복 횟수 */
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}