CSS_8 (Animation)

Transform을 Combine하는건 마우스를 올려놓는 등 조건이 있었다.

이는 Animation이라고 하기 어렵다.

 

만약!!! 자기 혼자 움직이는 Animation을 만들고 싶으면 어떻게 해야할까..!?

 

오늘도!!! 이거를 가지고 놀것이다.

 

(TMI : 내가 찍은거다)

 

애니메이션은 hover 등등을 사용하지 않아도 자동으로 움직인다.

img {
  margin: 100px;
  border: 5px black;
  border-radius: 50%;
  animation: Gaegul 5s ease-in-out infinite;
}

@keyframes Gaegul {
  from {
    transform: rotateX(0);
  }
  to {
    transform: rotateX(360deg);
  }
}

애니메이션을 사용하기 위해서 @ 라는 기호를 쓸것이다. 그리고 keyframe에는 두가지 속성이 있다.

시작 전에! keyframes뒤에 Gaegul은 알아서 원하는 id를 작성하면 된다.

 

우선 첫번쨰는 from~to. 말 그대로 from 부터 to 까지 어떤 변화가 될건지 적는다.

지금은 x축을 기준으로 360도 회전이 일어난다.

이를 5s, ease-in-out으로 infinite(무한반복)설정을 한다.

 

쉽다!!!!

 

근데 원래 상태로 다시 돌아가서 다시 시작하기 때문에 보기 좋지 않을 수도 있다. 무슨 말이냐!!

나는 단순히 끝까지 가서 다시 되돌아오면 좋겠지만

여기서는 뚝뚝 끊겨버린다.

 

이를 해결하기 위해서는 from~to 대신 %를 쓰면 된다.

 

@keyframes Gaegul {
  0% {
    transform: rotateX(0);
  }
  50% {
    transform: rotateX(360deg) translateX(500px);
  }
  100% {
    transform: rotateX(0);
  }
}

이런식으로 말이다!

0 ~ 50% 까지는 위와 같지만, 50%~100%는 다시 원래대로 돌아가게 된다.

(참고로 50%에서 쓰인 것 처럼

translateX도 같이 쓸 수 있다. - 오른쪽으로 500px이동)

 

%는 본인이 원하는 만큼 쓸 수 있다. 몇개든 상관 없다. 그리고! 꼭 transform이 아니어도 상관 없다. border이나 등등.

하지만 일부에 대해서는 animation이 되지 않을수 있다는건 참고!

 

새로운 페이지를 소개하자면!

https://animista.net/

Animista

가서 이것 저것 뒤져보면 될듯!