프론트엔드/CSS

애니메이션(Animation)

ksge7 2020. 9. 16. 03:31

애니메이션란?

HTML에 적용되는 CSS스타일을 다른 CSS스타일로 바꿀 때 부드럽게 변화시킨다.

 

애니메이션은 애니메이션 대상이 되는 CSS스타일과 애니메이션 시퀀스를 나타내는 복수의 키프레임으로 이뤄진다.

 

애니메이션과 트랜지션

물론 트랜지션으로도 애니메이션 효과를 나타낼 순 있으나 animation 그 자체보단 제한적이다.

 

그리고 트랜지션은 꼭 자바스크립트가 있거나 가상 클래스 선택자가 있어야 움직인다.

 

하지만 애니메이션은 그런것 없이 혼자 가능하다.

 

애니메이션은 트랜지션보다 더 나아가 그 안에서 세부적인 움직임, 시간 등도 구현이 가능하다.

 

애니메이션과 자바스크립트

물론 CSS애니메이션은 컴퓨터 리소스면에선 효율적이긴하다.

 

다만 경우에 따라 자바스크립트를 사용하는 것이 더 편하게 사용할 수 있기도 하다.

 

간단한 CSS는 CSS내내의 애니메이션 기능을 쓰고 어려운건 자바스크립트로 처리하자.

 

아래는 네모난 상자가 옆으로 움직이는 애니메이션이다.

 

<style>
    div{
        position: absolute;
        width: 150px; 
        height: 150px;
        animation-name: move, fadeout, changeColor;  /* 애니메이션 이름 지정 */
        animation-duration: 10s;  /* 애니메이션 지속 시간 */
        animation-iteration-count: infinite;  /* 애니메이션 반복 횟수 */
    }

    @keyframes move{  /* 옆으로 움직이는 애니메이션에 대한 키프레임*/
        from { left: 0;}  /* 시작은 0에서 */
        to { left: 700px; }  /* 끝은 700px */
    }
    @keyframes fadeout{  /* 점차 사라지는 애니메이션에 대한 키프레임 */
        from { opacity: 1;}  /* 시작은 투명도 1에서 */
        to { opacity: 0; }  /* 시작은 투명도 0으로 */
    }
    @keyframes changeColor{  /* 색상이 변하는 애니메이션에 대한 키프레임 */
        from { background-color: red;}  /* 시작은 red에서 */
        to { background-color: green; }  /* 끝은 green으로 */
    }
</style>
<body>
    <div> </div>
</body>