CSS3 색상 변환 애니메이션

CSS3 색상 변환 애니메이션

Author : Jino Bae / Send Mail

애니메이션

CSS에서 애니메이션을 다룰때는 브라우저마다 차이가 있어서 주의해야 한다. 이 포스트에선 크롬을 중심으로 적용되는 애니메이션만 다룬다.



▲ 만들어질 애니메이션


필자의 블로그엔 그린/블루 색상이 곳곳에 보인다. 개인적으로 좋아하는 색상이라 자주 사용한다. 블로그 상단바에 위 애니메이션을 적용했으나 너무 요란해 보이고, 메모리가 부담되서 눈물을 머금고 제거했다.


각설하고 위와같은 애니메이션을 만들기 위해선 CSS에서 @keyframes라는 키워드를 사용해야 한다. 색상 변경 뿐 아니라 여러 애니메이션을 적용할 수 있다. 작성법은 아래와 같다.

/* Comment for mobile. */

@keyframes greenblue
{
    0% { background-color: green; }
    50% { background-color: blue; }
    100% { background-color: green; }
}


HTML에서 적용하려면 다음과 같이 생성한다.

<!-- Comment for mobile. -->

<div style="width:300px; height:300px; animation: greenblue 5s infinite;"></div>

위 div는 greenblue애니메이션이 5초동안 무한히 반복되는 div로 생성된 것이다. 시간을 바꾸려면 5s부분을 바꾸고 횟수를 바꾸려면 infinite 부분을 바꾸면 된다.




이번엔 연속해서 2개의 애니메이션이 실행되는 div를 만들어 보자. 도형이 투명이었다가 녹색으로 변한뒤 계속해서 색깔이 바뀌는 애니메이션을 적용하려고 한다.

/* Comment for mobile. */

@keyframes loading
{
    0% { background-color: rgba(0, 0, 0, 0); }
    100% { background-color: green; }
}

@keyframes greenblue
{
    0% { background-color: green; }
    50% { background-color: blue; }
    100% { background-color: green; }
}

CSS는 위와같이 작성하였다.


<!-- Comment for mobile. -->

<div style="width:300px; height:300px; animation: loading 3s, 5s greenblue infinite 3s;"></div>

HTML의 애니메이션 속성에서 반점으로 여러의 애니메이션을 적용시킬 수 있는데 greenblue 애니메이션의 앞뒤에 시간이 2개가 붙은것을 볼 수 있다.


'1번 애니메이션' '재생시간', '재생시간' '2번째 애니메이션' '반복 횟수' '대기 시간'

위와 같은 순서로 배열되어 있다. 애니메이션 앞에 온 시간이 greenblue의 재생될 시간, 뒤에온 시간이 greenblue가 몇 초 뒤에 재생될 것인가를 나타내고 있다. 만약 뒷 시간을 없애면 1번 애니메이션인 loading은 무시된다.



▲ 만들어진 애니메이션


위와같이 웹사이트 최초 실행시 초록빛이 은은하게(?) 물들었다가 색상히 무한히 변경된다.




Jino Bae
WRITTEN BY

Jino Bae

Digital is a purely man-made playground. That's why I like.
[email protected]


comments powered by Disqus