오늘도 CSS의 고급 활용에서 애니메이션에 대하여 해보려 합니다.

동적 변화

CSS3로만으로도 HTML tag 모양의 동적 변화를 가능하게 할 수 있습니다.

• 애니메이션

• 전환

• 변환

애니메이션

HTML tag의 모양 변화를 시간 단위로 설정하여 animation 효과를 만들 수 있습니다.

1. @keyframes으로 HTML tag의 시간별 모양 변화 모델을 만듭니다.

2. animation 관련 속성으로 스타일을 작성합니다.

즉,

@keyframes text-Ani { 
    0% { color : blue; } 
    50% { color : yellow; } 
    100% { color : red; } 
    }

이렇게 시간대의 변화를 퍼센트로 나타내며 작성하면

span { 
    animation-name : text-Ani;
    animation-duration : 10s;
    }

위와 같이 해당 태그에 작성합니다.

span { 
    animation-name : text-Ani;
    animation-duration : 10s;
    animation-iteration-count : infinite;
    }

infinite 값을 부여하면 무한 반복됩니다.

전환

HTML tag에 적용된 CSS3 속성 값의 변화를 서서히 진행시켜 애니메이션 효과를 생성시키는 것을 전환이라고 합니다.

span { 
    transition : font-size 10s; 
    }

이런식으로 미리 transition 속성을 줘야 합니다.

변환

텍스트나 이미지를 회전, 확대하거나 다양한 모양으로 출력되게 할 수 있습니다.

주로 회전 각도의 단위는 deg이며, 시계방향으로 회전합니다.

예를 들어서,

div { 
    transform : rotate(10deg); 
}

위와 같이 작성하면 우측으로 10도 기울어진 상태로 나옵니다.

크기를 확대하려면 scale을 이용합니다.

div { 
    transform : scale(10,5); 
}

위와 같이 작성하면 x축으로 10배, y축으로 5배 길이가 증가합니다.