[HTML&CSS] Animations

 

 

 

 

 

[HTML&CSS] Animations 

( UPDATE 2023 - 05 - 31 )

 

 

 

---

Animation - 1

---

 

Animation

마우스를 위로 올리거나 transition 없이

원하는 만큼 계속 재생되는 애니메이션을 만들 수 있다.

 

 

애니메이션을 만들기 위한 규칙은 @ketframes 라고 적고,

그 다음에 애니메이션의 이름을 정한다.

 

 

 

 

A에서 B까지 움직이는 애니메이션 만들기

@keyframes 이름{} 만든 후

안에 A지점 부터 B지점까지의 애니메이션을 선택

from{A} to{B}

 

@keyframes coinflip {

from {transform: rotateX(0);}

to {transform: rotateY(360deg);}

}

/* 이렇게 내 에니메이션을 설정하고, 애니메이션을 줄 속성에 작성하면 된다. */

img {animation: coinflip 5s ease-in-out;}

 

 

 

*참고

이렇게 여러개 조합도 가능하다.

@keyframes coinflip {

from {transform: rotateX(0);} 

to {transform: rotateY(360deg) translateX(180deg);}

}

 

 

 

 

 

infinite

속성에 infinite를 쓰면 5초 동안의 애니메이션이 무한으로 반복.

 

attr{ animation: 애니매이션이름 infinite; }

 

 

 

 

 

---

Animation - 2

---

 

부자연스러운 애니메이션 개선 방법

 

만약 y축으로 돌아가는 애니메이션이 있는데 거기에 x축도 움직이게 하는 애니메이션을 추가했다.

Animation:infinite를 적게되면 y축은 계속 돌지만 x축은 다시 처음자리에서 시작한다.

 

이러한 부자연스러운 애니메이션을 개선하고 싶을 땐

 

@keyframes “text” {

0% {

Transform: rotateY(0);

}

50% {

Transform: rotateY(180deg) translate(100px)’

}

100% {

Transform: rotateY(0);

}

}

 

이런식으로 %를 주면 반복하는 행위를 계속 이어지도록 개선할 수 있다.

 

안에 요소를 자유롭게 추가할 수 있다.

 

 

 

 

from to 외의 다른 방법

 

from to 말고, 1,2,3,4,5...10 혹은 0% 25% 50% 75% 100% 같이 여러 단계로 나뉘어 애니메이션을 만들 수 있다.

 

 다른 property들도 애니메이션으로 만들 수 있다.

꼭 transform만 써야하는 건 아니지만, transform을 쓰는걸 권한다.

일부 property는 애니메이션이 잘 안되기 때문이다.

 

 

 

 

css 애니메이션 참고사이트

클릭

 

 

 

---

출처

---

 

노마드 코더 코코아톡 클론코딩

 

 

css 애니메이션 참고사이트