21 CSS Animation

 

---

CSS Animation

 

 

CSS Animation은 요소의 현재 스타일을 다른 스타일로 천천히 변화 시킬 수 있다.

CSS2에서는 이러한 효과를 표현하기 위해서는 자바스크립트나 플래시 등의 외부 플러그인을 사용해야만 했다.

하지만, CSS3에서는 @keyframes 규칙을 사용하여 손쉽게 적용할 수 있게되었다.

 

 

@keyframes 규칙이란?

 

CSS3에서 애니메이션 효과를 사용하기 위해서는 우선 애니메이션에 대한 키 프레임(keyframe)을 정의해야 한다.

키 프레임(keyframe)에는 특정한 시간에 해당 요소가 가져야 할 CSS 스타일을 명시한다.

 

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

 

애니메이션 효과가 동작하기 위해서는 먼저 animation-name 속성을 이용하여 요소와 키 프레임을 연결해야 한다.

 

 

[ 사용방법 ]

시작 : from 또는 0%
과정 : 1%, 10% ...
끝 : to 또는 100%

 

[예시]

<style>
        .box{
            width: 200px;
            height: 200px;
            text-align: center;
            animation-name: moving; /*animation-name으로 keyframes와 연결*/
            animation-duration: 3s; /*애니메이션을 3초동안 재생*/
            animation-iteration-count: infinite; /*무한반복*/
            animation-direction: alternate;  /*정해진 순서로 진행했다가 다시 반대 순서로 진행*/
        }

        @keyframes moving{
            /*이름:moving*/
            from{ /*시작*/
                background-color: gold;
            }
            
            50%{ /*과정*/
                background-color: pink;
            }

            to{ /*끝*/
                background-color: red;
            }
        }
</style>

 

from 키워드나 to 키워드 대신에 퍼센트(%)를 사용하여 좀 더 세세하게 설정할 수도 있다.

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

 

@keyframes moving{     
            0%{background-color: pink;}
            20%{background-color: rgb(255, 160, 176);}
            40%{background-color: rgb(255, 124, 146);}
            60%{background-color: rgb(253, 62, 94);}
            80%{background-color: rgb(253, 19, 58);}
            100%{background-color: rgb(255, 0, 43);}
}

 

 

Animation속성

 

1. animation-name

 

선택자{ animation-name: 속성값;}

 

애니메이션의 이름을 설정한다.

이때, 원하는 애니메이션의 keyframes와 연결해야한다.

 

선택자{ animation-name: moving;}

@keyframes moving{
	....
}

 

2. animation-fill-mode

 

선택자{animation-fill-mode: 속성값;}

 

애니메이션이 끝난 후에 어떻게 처리할지 설정한다.

 

속성값	설명
backwards	기본설정. 시작되기 전으로 되돌림
forwards	애니메이션 키프레임이 100%로 도달했을 때 마지막 키프레임을 유지

 

 

 

3. animation-direction

 

선택자{animation-direction: 속성값;}

 

 애니메이션의 진행 방향을 정하는 속성이다.

 

속성값	설명
normal	정해진 순서로 진행(굳이 쓸 필요는 없음 그냥 안쓰면 정방향으로 진행된다.)
reverse	반대 순서로 진행
alternate	정해진 순서로 진행했다가 다시 반대 순서로 진행
alternate-reverse	반대 순서로 진행했다가 다시 정해진 순서로 진행

 

[예시]

 

@keyframes moving{
            from{background-color: red;}
            50%{background-color: pink;}
            to{background-color: deepskyblue;}
}

 

 

 

 

속성값	진행 순서
normal	red - pink - deepskyblue
reverse	deepskyblue - pink - red
alternate	red - pink - deepskyblue - deepskyblue - pink - red
alternate-reverse	deepskyblue - pink - red - red - pink - deepskyblue

 

 

 

4. animation-iteration-count

 

선택자{animation-iteration-count: 속성값;}

 

 애니메이션이 몇번 반복될지 설정한다.

 

속성값	설명
n (숫자 1,2,3....)	n번 만큼 진행
infinite	무한반복

 

 

5. animation-duration

 

선택자{animation-duration: 속성값;}

애니메이션이 일어나는 시간을 설정한다.

 

 

 

6. animation

애니메이션 축약 표현(animation shorthand)으로 모든 animation 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

 

 

[예시]

box{  
	animation-name: moving;
    animation-duration:1.5s;
    animation-iteration-count:infinite;
    animation-direction: alternate;
    }

 

위의 내용을 한줄로 작성하면 아래와 같다.

box{ animation: moving 1.5s infinite alternate}

 

 

 

내용 출처 : TCP School www.tcpschool.com/

---

열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.

수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>