CSS 애니메이션 타이밍 효과 비교 (linear, ease, ease-in, ease-in-out)

 

주 사용 요소 

animation-timing-function, 대표적인 설정값 

• linear :   일정한 속도로 진행
• ease : 천천히 시작되고 속도가 줄어들면서 끝난
• ease-in : 천천히 시작
• ease-out : 빠르게 시작
• ease-in-out: 빠르게 시작되어 평균속도 유지

 

출처 : https://developer.tizen.org/community/tip-tech/working-css3-transitions

 

Result 

각 버튼을 클릭하면 속도확인 가능합니다.  

 

 

Html 

<div class="box div1">기본값</div>
<div class="box div2">linear</div>
<div class="box div3">ease</div>
<div class="box div4">ease-in</div>
<div class="box div5">ease-out</div>
<div class="box div6">ease-in-out</div>

Css 

div{
  margin:50px auto;
  display:block;
  vertical-align: top;
  width:100px;
  height:100px;
  background:#202228;
  border-radius:6px;
  text-align:center;
  line-height:100px;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  }
.ani1{animation: rotateAni 1s infinite;}
.ani2{animation: rotateAni 1s linear infinite;}
.ani3{animation: rotateAni 1s ease infinite;}
.ani4{animation: rotateAni 1s ease-in infinite;}
.ani5{animation: rotateAni 1s ease-out infinite;}
.ani6{animation: rotateAni 1s ease-in-out infinite;}


@keyframes rotateAni {
  0%{transform: rotateY(0)}
  100%{transform: rotateY(360deg)}
}