css 스타일로 애니메이션 주기

네 안녕하세요, 이번 포스팅에서는 css로 태그에 동적 변화를 주는 걸 해보도로 하겠습니다.

자바스크립트를 쓰지 않고 수행 가능한 동적 변화 요소는 다음과 같습니다.

애니메이션
전환
변환

이렇게 3가지이며, 이번 포스팅에서는 애니메이션을 주는 방법에 대하여 알아보도록 하겠습니다.

그럼 지금부터 시작하도록 하겠습니다.

1. 애니메이션 주기 : @keyframes 사용

css로 애니메이션 효과를 주는 방법은 태그의 모양 변화를 시간 단위로 설정해 만드는 것입니다.

이 방법을 쓰기 위해서는 아래와 같은 작업이 필요합니다.

시간별 애니메이션 장면 작성하기
애니메이션 스타일 시트 작성하기

1 - 1. 시간별 애니메이션 장면 작성하기

시간별 에니메이션 장면을 작성할 때는 @keyframe이라는 속성을 사용합니다.

여기서 어사인(@)은 이벤트를 나타내는 약자로 쓰입니다.

사용 방법은 이렇습니다.

@keyframes name {
    시간 비율 {스타일; 스타일;} /* 시간 비율 시점까지 적용할 스타일 시트 작성 */
    ...
    시간 비율 {스타일; 스타일;} /* 이전 시점에서 시간 비율 시점까지 적용할 스타일 시트 작성 */
}

이러한 템플릿 이용합니다.

이걸 이제 직접 적용을 시켜보면 이렇게 작성할 수 있습니다.

@keyframes textColorAnimation {
    0% {color : blue;} /* 시작 시 0% 대신 from 써도 상관 x */
    30% {color : green;} /* 30% 경과 시 까지 */
    100% {color : red;} /* 끝까지, 100% 대신 to 써도 상관 x */
}

이렇게 쓸 수 있습니다.

그리고 여기서 0%와 100%는 시작 지점과 끝 지점을 나타내므로,

0% 대신 from을, 100% 대신 to를 써서 나타내도 됩니다.

1 - 2. 애니메이션 스타일 시트 작성하기

애니메이션 속성 값을 주었으면 이를 적용시킬 스타일 시트가 필요합니다.

스타일 시트는 이런 식으로 작성합니다.

animation-name : 에니메이션 이름; /* @keyframes의 name 지정 */
animation-duration : 에니메이션 지속 시간; /* 에니메이션이 1회 실행되는 시간 */
animation-iteration-count : 에니메이션 반복 횟수;
/* 기본적으로 숫자를 주지만, infinite 입력 시 무한 반복 */

이런 식으로 작성을 합니다.

그럼 이제 이를 이용해서 스타일 시트를 작성해 보도록 하겠습니다.

span {
    animation-name : textColorAnimation; /* 에니메이션 이름 입력 */
    animation-duration : 5s; /* 1회 수행 완료 까지 걸리는 시간 - 5초 */
    animation-iteration-count : infinite /* 무한 반복 */
}

이렇게 작성할 수 있습니다.

그럼 이 스타일 시트들을 직접 html에 적용시켜서 나타내보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>애니메이션</title>
    <style>
    @keyframes textColorAnimation {
        0% {  color : blue;}
        30% {  color : green;}
        100% { color : red;}
    }
    span {
        font-family : "arial black";
        animation-name: textColorAnimation;
        animation-duration: 5s;
        animation-iteration-count: infinite;
    }
    </style>
    </head>
    <body>
    <!--  <h3>텍스트 색 애니메이션</h3>
    <hr> -->
    <p><span>span</span> 텍스트를
    5초에 blue, green, red로
    무한 반복합니다.</p>
    </body>
</html>

이제 결과 화면을 보여드리도록 하겠습니다.

이런 식으로 색이 파란색부터 시작해서 제일 마지막에 빨간색으로 바뀌는 게

5초에 걸쳐 1회 수행이 되는데,

이게 무한 반복이 됩니다.

이제 이걸 활용해서 글자의 크기를 시간의 변화에 따라 줄이는 코드를 한 번 작성해 보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>애니메이션</title>
    <style>
        @keyframes bomb {
            from { font-size : 500%;}
            to { font-size : 100%;}
        }
        h3 {
            animation-name : bomb;
            animation-duration : 3s;
            animation-iteration-count : infinite;
        }
    </style>
</head>
<body>
    <h3>꽝!</h3>
    <hr>
    <p>꽝! 글자가 3초동안 500%에서
    시작하여 100%로 바뀌는
    애니메이션입니다. 무한 반복합니다.
    </p>
</body>
</html>

이렇게 작성을 했고, 이제 결과를 보도록 하겠습니다.

이런 식으로 시간 변화에 따라서 글자의 크기가 줄어드는 것을 볼 수 있습니다.

여기까지 에니메이션을 주는 방법에 대하여 알아보았습니다.

다음 포스팅에서는 전환에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css 스타일로 변환 효과 주기 (0)	2023.06.30
css 스타일로 전환 효과 주기 (0)	2023.05.22
css 폼 요소에 마우스 처리 하기 (0)	2023.05.15
css 폼 요소 테두리 꾸미기 (0)	2023.05.08
css 폼 요소에 스타일 입히기 (0)	2023.05.08

개발러 L의 뻔fun한 코딩

css 스타일로 애니메이션 주기