animation-timing-function

See the Pen animation-timing-function by nilgi (@nilgi) on CodePen.

 

.box {
    width: 30px;
    position: relative;
    animation-name: boll;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes boll {
    from {left: 0px;}
    to {left: 200px; transform: rotate(500deg);}
}

.boll1 {
    animation-timing-function: linear; / 처음부터 끝까지 같은 속도
}
.boll2 {
    animation-timing-function: ease; / 기본값. 느림 - 빠름 - 느림
}
.boll3 {
    animation-timing-function: ease-in; / 느린 시작
}
.boll4 {
    animation-timing-function: ease-out; / 느린 끝내기
}
.boll5 {
    animation-timing-function: ease-in-out; 시작과 끝을 느리게. 빠름은 없음
}