[CSS] 공 튀기기 애니메이션 (애니메이션 / 키 프레임)

[css 애니메이션]

animation 속성의 하위 속성은 다음과 같습니다.

animation-name (en-US) 이 애니메이션의 중간 상태를 지정합니다. 중간 상태는 @keyframes 규칙을 이용하여 기술합니다.
animation-delay 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.
animation-direction 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.
animation-duration 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다. 재생 시간의 기본값은 0초이므로, 재생할 시간을 명시하지 않으면 아무런 효과도 나타나지 않을 것입니다.
animation-iteration-count (en-US) 애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다.
animation-play-state (en-US) 애니메이션을 멈추거나 다시 시작할 수 있습니다.
animation-timing-function (en-US) 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.
1. linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
2. ease : 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다 음에는 빨라지고, 마지막에는 다시 느려집니다.
3. ease-in : 애니메이션 효과가 천천히 시작됩니다.
4. ease-out : 애니메이션 효과가 천천히 끝납니다.
5. ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝납니다.
6. cubic-bezier(n,n,n,n) : 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.
animation-fill-mode 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다

animation : 이름 진행시간 가속도 지연시간 반복횟수 연결방향;
Ex ) animation : ball 0.6s ease-in Infinite alternate-reverse;


[keyframes]
@keyframes 규칙 안에 CSS 스타일을 설정해 놓으면, 해당 요소의 스타일은 특정 시간까지 현재 스타일에서 설정해 놓은 새로운 스타일로 천천히 변화할 것입니다.

@keyframes 애니메이션이름 { from { 애니메이션 발생하는 *처음 시점*에 나타나야할 애니메이션 효과를 작성합니다.} to{애니메이션 발생하는 *마지막 시점*에 나타나야할 애니메이션 효과를 작성합니다.} } @keyframes 애니메이션이름 { 0% { from과 똑같습니다.} 50%{ 애니메이션 발생하는 *중간지점에 나타나야할 효과를 작성합니다.} 100%{to와 똑같습니다.} }

*참고
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations

CSS 애니메이션 사용하기 - CSS: Cascading Style Sheets | MDN

[ 공튀기기 애니메이션 ]

See the Pen by 현정 (@Celine__509) on CodePen.