CSS day20

animation

animation

animation을 활용하면 transition보다 더 쉽게 애니메이션 효과를 만들 수 있다. animation 은 연속적인 장면들(변화하는 지점)을 만드는 방법을 사용하는데 이 지점들을 키프레임을 통해 지정할 수 있다. 먼저 @keyframes를 지정해주고 animation 속성으로 애니메이션 시간, 반복, 순방향 역방향 등을 정한다.

@keyframes

애니메이션의 장면들을 순서와 함께 지정하고 모아놓은 집합체라고 볼 수 있다.

@keyframes <이름> {
	<선택자> { <스타일> }
}

@keyframes moving {
    from {
        width: 200px;
        background-color: gold;
        opacity: 0.5; /*투명도*/
        transform: scale(0.5) rotate(30deg);
    }
    to {
        width: 400px;
        background-color: greenyellow;
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

위 예시 처럼 처음(from)과 끝(to)을 지정해줄 수 도 있고 그 사이 과정을 %를 활용하여 1%, 2%, … 100% 까지 지정할 수 도 있다.

animation

이제 위에서 지정한 @keyframes를 어떻게 표현할 지 animation 속성을 통해 알아보자

종류	설명	세부 속성값
animation-name	애니메이션 이름을 설정	키프레임 이름
animation-fill-mode	애니메이션을 어떻게 처리할지 설정	forwards(키프레임 100% 도달 시 마지막 키프레임 유지)
animation-direction	애니메이션의 진행방향을 정하는 속성	reverse(역방향), | alternate(정방행 후 역방향) | reverse-alternate(역방향 후 정방향)
animation-iteration-count	애니메이션이 몇번 반복될지 설정	infinite(무한) | 숫자
animation-duration	애니메이션이 일어나는 시간 설정	시간
animation-timeing-function	애니메이션의 시작, 중간 ,끝에서 속도를 설정	linear | ease | ease-in | ease-out | ease-in-out

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

이런 식으로 표현이 가능하고 animation 속성만 사용하여 단축시킬 수 있다. 위 코드를 animation만 활용하여 표현한다면,

.box {
    animation-name: moving 3s infinite alternate;
}

이렇게도 가능하다.

위 애니메이션을 결과로 보자면, 아래 사진과 같이 이러한 형태로 반복하는 것을 확인할 수 있다. 애니메이션 예제는 직접 해봄으로써 결과를 확인해보기를 추천한다.