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