[CSS] animation-timing-function

Intro

css 애니메이션을 수정해야 하는 일이 생겨 css 애니메이션에 대해 알아보는 시간을 가졌다. ✌

css animation effect

CSS3에서 애니메이션 효과를 사용하기 위해서는 우선 애니메이션에 대한 키 프레임(keyframe)을 정의해야 한다. 키 프레임(keyframe)에는 특정한 시간에 해당 요소가 가져야 할 CSS 스타일을 명시한다.

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

<style>
    p {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 3s;
        animation-name: movingPara;
        animation-duration: 3s;

    }
    @keyframes movingPara {
        from { margin-left: 100%; }
        to { margin-left: 0%; }
    }
</style>

위의 예제에서 from 키워드에는 처음 스타일을 명시하고, to 키워드에는 마지막 스타일을 명시한다. 하지만 좀 더 복잡한 애니메이션 효과를 나타내기 위해서는 from 키워드나 to 키워드 대신에 퍼센트(%)를 사용할 수 있다.

0%에는 처음 스타일을, 100%에는 마지막 스타일을 명시하고, 중간에 원하는 수만큼의 키 프레임을 생성할 수 있다.

timing-function

timing-function은 특정 애니메이션을 실행할 때 애니메이션의 가속운동, 즉 특정한 시점에서 가속할지 감속할지를 정하는 속성이다. 애니메이션 효과의 시간당 속도를 설정한다. animation-timing-function 속성의 속성값으로는 다음과 같은 값을 설정할 수 있다.

1. linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행된다.
2. ease : 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려진다.
3. ease-in : 애니메이션 효과가 천천히 시작된다..
4. ease-out : 애니메이션 효과가 천천히 끝난다.
5. ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝난다.
6. cubic-bezier(n,n,n,n) : 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행된다.

conclusion

@keyframes 규칙, animation 설정 방법과 이에 해당하는 여러 속성들을 배울 수 있는 시간이었다.

http://www.tcpschool.com/css/css3_transform_animation
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
https://apes0113.postype.com/post/2620