[CSS]animation을 적용하는 예시

'float'이라는 위아래로 가볍게 움직이는 애니메이션 만들기

 

키프레임 정의

@-webkit-keyframes float {
  0%,100% {
    top:10px;
  }
  50% {
    top:30px;
  }
}
@keyframes float {
  0%,100% {
    top:10px;
  }
  50% {
    top:30px;
  }
}

 

CSS 적용하기 - 3초 동안 무한 반복. 시간당 속도 옵션은 ease

float {
	webkit-animation: 3s arrow infinite ease;
	animation: 3s arrow infinite ease;
}

 

 

1. linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.

2. ease : 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.

3. ease-in : 애니메이션 효과가 천천히 시작됩니다.

4. ease-out : 애니메이션 효과가 천천히 끝납니다.

5. ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝납니다.

6. cubic-bezier(n,n,n,n) : 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.

출처 : TCP SCHOOL