[CSS] ⑨ 예제로 보는 CSS 애니메이션

티스토리 뷰

프론트엔드/CSS

[CSS] ⑨ 예제로 보는 CSS 애니메이션

doeunnkimm 2022. 8. 18. 17:41

▶CSS 애니메이션

CSS 애니메이션을 통해 엘리먼트 즉 컨텐츠들을 키프레임을 통해 다양한 움직임을 줄 수 있습니다.

애니메이션의 대표적인 속성 5가지는 다음과 같습니다.

transform : 트랜스폼은 요소 이동, 크기 변경, 위치, 색상 등 속성 변경 동작을 수행
transition : 트랜지션은 시간 경과에 따라 하나의 속성 상태가 다른 속성 상태로 변형
@keyframes : 키프레임 애니메이션을 만들 수 있도록 해주는 블록 키워드
animation : 키프레임 애니메이션 실행을 위해 CSS에 설정해 주는 속성

예제를 통해 자세히 알아봅시다.

예제 1. 네모 박스 색깔, 위치, 각도 애니메이션

<body>
	<div id="box"></div>
</body>

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: yellow;
        border: 1px dotted gray;
    }
    
    div:hover {
        background-color: blue;
        transform: scale(1.3) translate(100px, 100px) rotate(180deg);
        transition: all 2s ease 0.2s; /*2초동안 실행. hover하면 0.2초 후에 실행(지연)*/
    }
</style>

transform은 어떻게 변경할 지를 입력한다고 했습니다.

위 예제 코드를 보면, scale 즉 크기를 1.3배, translate(100px, 100px)은 위치를 어디로 이동시킬 건지를 작성합니다.

또한 rotate(180deg)는 180도 회전시키겠다는 의미입니다.

transition은 시간과 관련된 속성입니다.

all 모든 속성에 대해서 2s 2초동안 실행하며 ease 0.2s 0.2초 지연시키겠다는 의미가 됩니다.

참고로 div:hover는 div 엘리먼트를 마우스가 닿았을 때 입니다.

마우스가 엘리먼트에 닿았을 때 애니메이션이 실행됩니다.

day13-3.html

0.00MB

예제 2. keyframe 이용하기

아래 코드에서 forwards라는 프로퍼티는 animation-fill-mode: forwards;로부터 작성되었습니다.

이는 애니메이션 미실행 시(대기 또는 종료) 요소의 스타일을 지정하는 부분입니다.

아래 표를 참고합시다.

animation-fill-mode
프로퍼티값	상태	설명
none	대기	시작프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
none	종료	애니메이션 실행 전 상태로 애니메이션 욧의 프로퍼티값을 되돌리고 종료한다.
forwards	대기	시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
forwards	종료	종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
backwards	대기	시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
backwards	종료	애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티 값을 되돌리고 종료한다.
both	대기	시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
both	종료	종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.

<body>
    <div id="box" class="anim"></div>
</body>
    
<style>
    div {
    width: 100px;
    height: 100px;
    background-color: yellow;
    border: 1px dotted gray;
}

    .anim {
    background-color: blue;
    animation: movebox 1s ease forwards;
}

    @keyframes movebox {
    from { transform: scale(0.5); }
    to { transform: scale(1.3) translate(300px, 300px) rotate(180deg);}
}
</style>

@keyframe으로 움직임 함수를 만들어주고 animation에서 함수를 실행시킨다고 이해하면 쉽겠습니다.

animation: movebox(movebox라는 keyframe을 적용) 1s(1초동안 실행) ease(애니메이션 효과를 위한 수치 함수) forwards(애니메이션 대기/종료 시 적용하고 종료)을 의미합니다.

day13-4.html

0.00MB

예제 3. 이동하면서 흐려지는 박스

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                position: absolute;
                width: 100px;
                height: 100px;
                animation-name: move, fadeout, changeColor;
                animation-duration: 5s;
                animation-iteration-count: infinite; /*재생 횟수*/
            }

            @keyframes move {
                from { left: 0; }
                to { left: 300px; }
            }
            @keyframes fadeout {
                from { opacity: 1; }
                to { opacity: 0; }
            }
            @keyframes changeColor {
                from { background-color: red; }
                to { background-color: blue; }
            }
        </style>
    </head>

    <body>
        <div></div>
    </body>
</html>

day13-my-1.html

0.00MB

예제 4. 이동하면서 색깔 바뀌는 박스

아래 코드에 animation-direction: alternate;라는 부분이 나오는데, 이것은 애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정하는 것입니다.

아래 표를 참고합시다.

animation-direction
프로퍼티값	설명
normal	기본값으로 from(0%)에서 to(100%) 방향으로 진행한다.
reverse	to에서 from 방향으로 진행한다.
alternate	홀수번째는 normal로, 짝수번째는 reverse로 진행한다.
alternate-reverse	홀수번째는 reverse로, 짝수번째는 normal로 진행한다.

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;
                animation: myAnimation 5s infinite;
                animation-direction: alternate;
            }
            @keyframes myAnimation {
                0% { background-color: red; left: 0px; top: 0px; }
                25% { background-color: yellow; left: 200px; top: 0px; }
                50% { background-color: blue; left: 200px; top: 200px; }
                75% { background-color: green; left: 0px; top: 200px; }
                100% { background-color: red; left: 0px; top: 0px; }
            }
        </style>
    </head>

    <body>
        <div></div>
    </body>
</html>

여기까지 CSS 애니메이션을 예제를 통해 공부해 보았습니다.

아래 블로그 글이 많이 도움이 되어서 첨부합니다 :)

https://poiemaweb.com/css3-animation

CSS3 Animation | PoiemaWeb

애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수

poiemaweb.com

728x90

LIST

'프론트엔드 > CSS' 카테고리의 다른 글

[CSS] ⑪ CSS 반응형 웹과 미디어 쿼리 (0)	2022.08.26
[CSS] ⑩ Flex의 모든 것 (0)	2022.08.22
[CSS] ⑧ CSS 화면 중앙 배치 (0)	2022.08.17
[CSS] ⑦ 접근성(Accessibility) (0)	2022.07.14
[CSS] ⑥ 반응형 웹을 위한 미디어 쿼리 (0)	2022.07.13

250x250

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

글 보관함

doeunn.log

티스토리 뷰