css) Animation

https://www.w3schools.com/css/css3_animations.asp

CSS Animations

 

애니메이션은 element에적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 준다.

애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다.

transition과의 차이점

transition은 0%에서 100%로 바로 변경된다면

animation은 0% 1% 2% ... 100%

따라서 transition보다 선택지가 많음.

 

transition은 hover와 같은 trigger에 의해 발동된다면 

animation은 그렇지 않다.

 

 

---

 

long ver

short ver

 

animation-duration이 몇초인지에 따라 % 가 몇초 지점인지가 달라진다.

animation-duration : 10s 라면 50%가 5s 지점일때다.

 

animation-iteration-count는 애니메이션이 몇번 반복될지 지정한다.

infinte 값 지정시 무한히 반복.

 

---

Animation-fill-mode

애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정한다.

 

https://developer.mozilla.org/ko/docs/Web/CSS/animation-fill-mode

animation-fill-mode - CSS: Cascading Style Sheets | MDN