[HTML+CSS][CSS3와 애니메이션] 04

[HTML+CSS][CSS3와 애니메이션] 03 - 트랜지션

[HTML+CSS][CSS3와 애니메이션] 02 - 변형과 관련된 속성들 [HTML+CSS][CSS3와 애니메이션] 01 - 변형 [HTML+CSS][다재다능한 CSS3 선택자] 03 - 가상 클래스와 가상 요소 [HTML+CSS][다재다능한 CSS3 선택자] 02..

onelight-stay.tistory.com

트랜지션을 보다 더 부드럽고

쉽게 사용할 수 있는

애니메이션에 대해서 알아보자.

CSS와 애니메이션

애니메이션은 시작 스타일과 끝 스타일을 지정하면

CSS에서 중간 스타일을 자동으로 추가해

전체적으로 부드럽게 변하는 애니메이션 효과를 만들어 낸다는

트랜지션과 비슷한 성격을 가지고 있긴 하지만,
CSS 애니메이션은 시작해 끝내는 동안 원하는 곳 어디서든 스타일을 바꾸며

애니메이션을 정의할 수 있다는 차이점이 있다.

이때, 애니메이션 중간에 스타일이 바뀌는 지점을

'키프레임(keyframe)이라고 한다.

CSS 애니메이션에서 사용하는 속성

애니메이션은 이전 모던 브라우저를 고려해

-webkit-, -moz-, -o- 접두사를 붙여서 사용한다.

@keyframes 속성 : 애니메이션 지정 설정

애니메이션의 시작과 끝을 비롯해 상태가 바뀌는 부분이 있을 경우

해당 속성을 이용해 바뀌는 지점을 설정하는 것으로
먼저 웹 문서에서 여러 애니메이션을 정의할 것을 대비해

'이름'으로 애니메이션을 구별해준 뒤에

스타일 속성 값이 바뀌는 지점을 '선택자'로 입력해 주면 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@keyframes</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blue;
            border: 2px black solid;
            -webkit-animation-name: change-bg;
            -moz-animation-name: change-bg;
            -o-animation-name: change-bg;
            animation-name: change-bg;
            -webkit-animation-duration: 3s;
            -moz-animation-duration: 3s;
            -o-animation-duration: 3s;
            animation-duration: 3s;
        }
        @-webkit-keyframes change-bg {
            from {
                background-color: blue;
            }
            to {
                background-color: cornflowerblue;
                border-radius: 50%;
            }
        }
        @-moz-keyframes change-bg {
            from {
                background-color: blue;
            }
            to {
                background-color: cornflowerblue;
                border-radius: 50%;
            }
        }
        @-o-keyframes change-bg {
            from {
                background-color: blue;
            }
            to {
                background-color: cornflowerblue;
                border-radius: 50%;
            }
        }
        @keyframes change-bg {
            from { /* 애니메이션 시작 시점 */
                background-color: blue;
            }
            to { /* 애니메이션 끝 시점 */
                background-color: cornflowerblue;
                border-radius: 50%;
            }
        }
    </style>
</head>
<body>
    <h3>사각형에서 원으로 서서히 바뀌는 애니메이션</h3>
    <div></div>
</body>
</html>

animation-name 속성 : 애니메이션 이름 지정

애니메이션을 이름으로 구분하기 위해 사용하는 속성으로

브라우저 접두사를 붙여 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation-name</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: black 2px solid;
            float: left;
            margin: 35px;
        }
        #box1 {
            background-color: greenyellow;
            -webkit-animation-name: shape;
            -moz-animation-name: shape;
            -o-animation-name: shape;
            animation-name: shape;
            -webkit-animation-duration: 3s;
            -moz-animation-duration: 3s;
            -o-animation-duration: 3s;
            animation-duration: 3s;
        }
        #box2 {
            background-color: violet;
            -webkit-animation-name: rotate;
            -moz-animation-name: rotate;
            -o-animation-name: rotate;
            animation-name: rotate;
            -webkit-animation-duration: 3s;
            -moz-animation-duration: 3s;
            -o-animation-duration: 3s;
            animation-duration: 3s;
        }
        @-webkit-keyframes shape {
            form {border-radius: 0%;}
            to {border-radius: 50%;}
        }
        @-moz-keyframes shape {
            form {border-radius: 0%;}
            to {border-radius: 50%;}
        }
        @-o-keyframes shape {
            form {border-radius: 0%;}
            to {border-radius: 50%;}
        }
        @keyframes shape {
            form {border-radius: 0%;}
            to {border-radius: 50%;}
        }
        @-o-keyframes rotate {
            form {
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
            }
        }
        @-moz-keyframes rotate {
            form {
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
            }
        }
        @-webkit-keyframes rotate {
            form {
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
            }
        }
        @keyframes rotate {
            form {
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
            }
        }
    </style>
</head>
<body>
    <h3>@keyframe을 사용해 실행할 애니메이션 지정하기</h3>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

animation-duration 속성 : 애니메이션 실행시간 설정

애니메이션이 얼마 동안 재생할 것인지를 설정하는 것이다.

animation-direction 속성 : 애니메이션 방향 지정

애니메이션이 끝난 후의 설정을 바꿔서 사용하는 것으로
애니메이션이 한 번 실행되면 원래 위치로 되돌아 가게 되는데
이때 원래대로 되돌아가거나 반대 방향으로 애니메이션을 한 번 더 실행할 수 있다.

animation-iteration-count 속성 : 반복 횟수 지정

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation-iteration-count</title>
    <style>
        .box {
            margin-top: 50px;
            margin-left: 100px;
            padding: 20px;
            height: 60px;
            -webkit-animation-name: move;
            -moz-animation-name: move;
            -o-animation-name: move;
            animation-name: move;
            -webkit-animation-duration: 3s;
            -moz-animation-duration: 3s;
            -o-animation-duration: 3s;
            animation-duration: 3s;
            -webkit-animation-direction: normal;
            -moz-animation-direction: normal;
            -o-animation-direction: normal;
            animation-direction: normal;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }
        @-webkit-keyframes move {
            from {
                width: 200px;
                background-color: wheat;
                opacity: 0.5;
                transform: rotate(150deg) scale(0.5);
            }
            to {
			    width: 400px;
			    background: #ff9400;
			    opacity: 1;
			    transform: scale(1) rotate(0deg);
		    }
        }
        @-moz-keyframes move {
            from {
                width: 200px;
                background-color: wheat;
                opacity: 0.5;
                transform: rotate(150deg) scale(0.5);
            }
            to {
			    width: 400px;
			    background: #ff9400;
			    opacity: 1;
			    transform: scale(1) rotate(0deg);
		    }
        }
        @-o-keyframes move {
            from {
                width: 200px;
                background-color: wheat;
                opacity: 0.5;
                transform: rotate(150deg) scale(0.5);
            }
            to {
			    width: 400px;
			    background: #ff9400;
			    opacity: 1;
			    transform: scale(1) rotate(0deg);
		    }
        }
        @keyframes move {
            from {
                width: 200px;
                background-color: wheat;
                opacity: 0.5;
                transform: rotate(150deg) scale(0.5);
            }
            to {
			    width: 400px;
			    background: #ff9400;
			    opacity: 1;
			    transform: scale(1) rotate(0deg);
		    }
        }
    </style>
</head>
<body>
    <h3>무한 반복하는 애니메이션 만들기</h3>
    <div class="box"><h3>CSS3 Animation</h3></div>
</body>
</html>

animation-timing-function 속성 : 애니메이션 속도 곡선

애니메이션의 시작과 중간, 끝에서의

속도를 선택해 속도 곡선을 지정하는 것이다.

animation 속성 : 애니메이션 관련 속성 한꺼번에 표기

길고 복잡한 애니메이션 관련 속성들을 간단히 한 줄로 표현하는 속성이다.

기본형에 나열된 속성 순서는 중요하지 않지만

시간 값이 두 개라면 첫 번째 시간으로 <animation-time>,
두 번째 시간은 <animation-delay> 속성으로 간주한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            margin: 70px;
            -webkit-animation: rotate 1.5s infinite, background 1.5s infinite alternate;
            -moz-animation: rotate 1.5s infinite, background 1.5s infinite alternate;
            -o-animation: rotate 1.5s infinite, background 1.5s infinite alternate;
            animation: rotate 1.5s infinite, background 1.5s infinite alternate;
        }
        @-webkit-keyframes rotate {
            from {
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            }
            50% {
                transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
            }
            to {
                transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
            }
        }
        @-moz-keyframes rotate {
            from {
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            }
            50% {
                transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
            }
            to {
                transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
            }
        }
        @-o-keyframes rotate {
            from {
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            }
            50% {
                transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
            }
            to {
                transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
            }
        }
        @keyframes rotate {
            from {
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            }
            50% {
                transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
            }
            to {
                transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
            }
        }
        @-webkit-keyframes background {
            from { background: red;}
            50% {background: green;}
            to {background: blue;}
        }
        @-moz-keyframes background {
            from { background: red;}
            50% {background: green;}
            to {background: blue;}
        }
        @-o-keyframes background {
            from { background: red;}
            50% {background: green;}
            to {background: blue;}
        }
        @keyframes background {
            from { background: red;}
            50% {background: green;}
            to {background: blue;}
        }
    </style>
</head>
<body>
    <h3>두 개 이상의 애니메이션 동시에 실행하기</h3>
    <div class="box"></div>
</body>
</html>

효과가 확연하게 드러나는 만큼

사용하는 코드와 접두사의 양이 많아지는 것 같다.

가급적 animation 속성을 사용해 한꺼번에 표기해야 겠다.

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

※ 해당 글은 습득 목적으로 작성된 글입니다 ※

저작자표시

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] Do it! HTML5+CSS3 웹 표준의 정석 공부 후기 (0)	2020.08.24
[HTML+CSS][플렉스 박스 레이아웃] 02 - 플렉스 박스 항목 배치를 위한 속성들 (0)	2020.08.11
[HTML+CSS][플렉스 박스 레이아웃] 01 - 플렉스 박스 레이아웃과 기본 속성들 (0)	2020.08.10
[HTML+CSS][미디어 쿼리] 03 - 미디어 쿼리를 사용해 웹 문서 만들기 (0)	2020.08.09
[HTML+CSS][미디어 쿼리] 02 - 미디어 쿼리 적용하기 (0)	2020.08.06

IT Information Notebook

[HTML+CSS][CSS3와 애니메이션] 04 - 애니메이션

CSS와 애니메이션

CSS 애니메이션에서 사용하는 속성

@keyframes 속성 : 애니메이션 지정 설정

animation-name 속성 : 애니메이션 이름 지정

animation-duration 속성 : 애니메이션 실행시간 설정

animation-direction 속성 : 애니메이션 방향 지정

animation-iteration-count 속성 : 반복 횟수 지정

animation-timing-function 속성 : 애니메이션 속도 곡선

animation 속성 : 애니메이션 관련 속성 한꺼번에 표기

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML+CSS][CSS3와 애니메이션] 04 - 애니메이션

CSS와 애니메이션

CSS 애니메이션에서 사용하는 속성

@keyframes 속성 : 애니메이션 지정 설정

animation-name 속성 : 애니메이션 이름 지정

animation-duration 속성 : 애니메이션 실행시간 설정

animation-direction 속성 : 애니메이션 방향 지정

animation-iteration-count 속성 : 반복 횟수 지정

animation-timing-function 속성 : 애니메이션 속도 곡선

animation 속성 : 애니메이션 관련 속성 한꺼번에 표기

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바