애니매이션을 왜?
-
앞서 #4-3 에서 배운 효과, 트랜스폼 로테이트 스케일 hover 할 필요 없이 마우스 갖다대고 뭐 어쩌고 필요 없이 계속!! 돌아가게 (발생하게) 하고 싶기를 원하면 어떻게 할까?
-
계속 rotate, scale 반복하고 싶다!!!!!!!!!!
: 지금껏 배운 트랜지션, 트랜스폼을 삭 지워봐봐 -
이제는 애니메이션을 생성해 볼 차례
: 일단 애니메이션 이름을 짓자. 키프레임이 있다고 하자.
-
@keyframes 옆에는 내가 적용할 애니메이션의 이름을 짓자 여기서는 scaleAndRotateSquare 로 지었다. 마치 함수 처럼 짓는거 같다.
-
@keyframes 는 css 로 하여금 내가 애니메이션을 생성했다는 것을 알려준다.
.box2 {
margin-top: 10em;
margin-left: 10em;
width: 10em;
height: 10em;
background-color: dodgerblue;
animation: scaleAndRotateSquare 1s ease-in-out;
}
@keyframes scaleAndRotateSquare {
from {
transform: none;
}
to {
transform: rotate(1turn) scale(.5, .5)
}
}-
from '아무것도 없는 상태' 에서 to '어떤 변화된 모습' 까지
: from{} to{} 를 사용한다. 그러나 만약 여러가지 효과를 (2스텝 초과) 주고 싶다면,
0% {} 25% {} 50%{} 75%{} 100%{} 이렇게 스테이지별로 다른 상태 값을 적용할 수 있다. -
그리고 변화하고자 하는 클래스에 트랜지션이 아닌 animation : 이렇게 하고 속성값을 적는다.
-
위의 코드대로 하고 새로고침을 누르면 아무것도 없는 상태에서 트랜스폼으로(1바퀴, 작은사이즈) 로 이동하는 애니메이션을 1s동안 하고 있다.
-
만약 이걸 무한히 반복하고 싶다면 애니메이션에 가서 infinite 라고 적어주면 무한 반복할 것이다.
.