Animations @keyframes
transition은 마우스 동작이나 키보드 동작이 이루어질 때만 변형이 이루어지고 애니메이션 효과가 생긴다.
계속 애니메이션을 재생하고 싶으면 뭘 해야 할까...
css에 animation속성을 이용하면 된다!
사용법은 먼저 style시트에서 @keyframes Name{}
option 1
@keyframes superLeeDeveloper {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
img {
border: 2px solid black;
border-radius: 50%;
animation: superLeeDeveloper 2s ease-in-out;
}
superLeeDeveloper라는 이름의 keyframe규칙이 2초 동안 애니메이션 효과를 갖는다...
단발성 실행 동작..
계속 지속하고 싶으면 animation: superLeeDeveloper 2s ease-in-out infinite;
infinite을 추가 해주자
from {} to {} 구문은 from에서 시작해서 to가 끝나면 다시 from 원위치로 돌아간다.
option 2
위 구문은 원위치로 돌아갈 때는 애니메이션이 적용되지 않는다.
해결해보자 다른 구문이 있다. step % 구문
@keyframes superLeeDeveloper {
0% {
transform: rotateY(0);
}
50% {
transform: rotateY(360deg) translateX(150px);
}
100% {
transform: rotateY(0) translateX(150px);
}
}
단계는 여러 번 나눌 수 있다.
@keyframes superLeeDeveloper {
0% {
transform: rotateY(0);
}
25% {
transform: scale(2);
}
50% {
border-radius: 0px;
transform: rotateY(360deg) translateY(150px);
border-color: tomato;
}
75% {
transform: scale(5);
}
100% {
transform: rotateY(0) translateY(0px);
}
이런 식으로 더 세분화 가능하다.
transform property를 다른 property로 바꿀 수 있다.
그러나 니코쌤은 transform을 추천한다
animista.net/play/exits/rotate-out
Animista
Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.
animista.net