본문 바로가기
웹/CSS

[코딩 공부_46] animation에 대하여

by BEE_0o0 2021. 4. 6.

animation은 css스타일을 다른 css스타일로 부드럽게 전환시켜준다

동적으로 보이게 해준다고 생각하면 이해하기 쉬울 거 같다! 

animation은 영상 편집과 똑같다고 생각하면 좋다 키프레임을 지정해서 수치를 주고 그 수치와 키프레임에 따라 느낌이 달라진다! 

실습부분을 보기 전에 animation에 대한 여러 속성을 먼저 정리해보자!

animation-name @keyframes 애니메이션 이름을 지정한다  
animation-duration 한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다. 0s
animation-timing-function 애니메이션 효과를 위한 타이밍 함수를 지정한다. ease
animation-delay 요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다 0s
animation-iteration-count 애니메이션 재생 횟수를 지정한다. 1
animation-direction 애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다. noraml
animation-fill-mode 애니메이션 미실행 시(종료 또는 대기) 요소의 스타일을 지정한다.  
animation-play-state 애니메이션 재생 상태(재생 또는 중지)를 지정한다. running
animation 모든 애니메이션 프로퍼티를 한번에 지정한다 ,t

 

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

 

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

<실습.1>

박스가 커졌다가 작아졌다가 하는 애니메이션을 만들어봤다!

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>basic animation</title>
<style>
    .box {
        border: 1px solid #000;
        height: 50px;
    }
    .battery {
        /* from */
        width: 10%;
        /* to */
        width: 100%;
        height: 100%;
        background: gold;
    /* animation 이름은 용도에 맞게 작성하기 자유롭게 */
        /* animation-name: full;
        animation-duration: 2s;
        animation-delay: 1s; */
    /* default : 1 */
        /* animation-iteration-count: infinite; */
    /* 끝나고 제자리로 돌아오는 속성이 default */
        animation-direction: alternate;
    /* 
        backwards : 다시 돌아와
        forward : 계속 전진해(끝지점 유지)
        both : 둘다 가능
     */
        /* animation-fill-mode: both; */
        /* animation-timing-function: linear; */
        cursor: pointer;
        /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        animation: full 1s 2s 3 backwards;
        animation-direction: alternate;
    }
    .battery:hover {
        animation-play-state: paused;
    }
    @keyframes full {
        /* 시작지점 */
        0% {
            width: 10%;
            font-size: 2rem;
            background: red;
        }
        50.5% {
            background: orange;
        }
        100% {
            width: 100%;
            font-size: 5rem;
            height: 200px;
            background: green;
        }
    }
</style>
</head>
<body>
    <div class="box">
        <div class="battery">
            battery
        </div>
    </div>
</body>
</html>

 

 

<실습2> 탁구장 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ping pong</title>
<style>
    .ground {
        width: 500px;
        margin: 200px auto;
        /* border: 1px solid #000; */
    }
    .table {
        height: 100px;
        background: green;
    }
    .ball {
        width: 50px;
        height: 50px;
        background: #fff;
        border: 1px solid #000;
        border-radius: 50%;
        /* 조기위치 */
        transform : translate(0, 25px);
        /* 마지막 위치 */
        /* transform: translate(450px, 25px); */
        animation: pingpong 2s infinite alternate;
    }
    .table:hover .ball {
        animation-play-state: paused;
        background: red;
    }
    @keyframes pingpong {
        0% {
            transform: translate(0, 25px);
        }
        100% {
        transform: translate(450px, 25px);
        }
    }
</style>
</head>
<body>
    <div class="ground">
        <h1>탁구장</h1>
        <div class="table">
            <div class="ball">

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

 

 

<실습3> 네모 안에서 빙글빙글 도는 원 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>around ball</title>
<style>
.wrap {
    width: 500px;
    margin: 0 auto;
}
.box {
    margin-top: 100px;
    width: 500px;
    height: 500px;
    background: lightpink;
}
.ball {
    width: 250px;
    height: 250px;
    background: gold;
    border-radius: 50%;
    /* 1회 */
    /* transform: translate(0, 0); */
    /* 2회 */
    /* transform: translate(100%, 0); */
    /* 3회 */
    /* transform: translate(100%, 100%); */
    /* 4회 */
    /* transform: translate(0, 100%); */
    /* 5회 */
    /* transform: translate(0, 0); */
    animation: around 3s infinite alternate linear;
}
@keyframes around {
    0% {
    transform: translate(0, 0);
    }
    25% {
    transform: translate(100%, 0);
    }
    50% {
    transform: translate(100%, 100%);
    background: coral;
    }
    75% {
    transform: translate(0, 100%);
    }
    /* 필요없는 친구~! 빼도 되는 친구~! */
    100% {
    transform: translate(0, 0);
    background: green;
    }
}
</style>
</head>
<body>
    <div class="wrap">
        <div class="box">
            <div class="ball"></div>
        </div>
    </div>
</body>
</html>

요번에는 애니메이션이여서 gif파일을 만들기 위해 .. 열심히 했다 ㅠㅠ 이것저것 프로그램을 설치해서 해봤는데 다 안되고 유일하게 반디캠만 된거같다 하하,, 진작에 다운받을걸했다 !! 

animation은 아직 어색하기도하고 서툴기도해서 실습을 많이 해보면서 익혀야할 거 같다!! 

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

'웹 > CSS' 카테고리의 다른 글

[코딩 공부_48] library 사용해보기(페이지 만들기-index편)  (0) 2021.04.09
[코딩 공부_47] 다양한 animation 실습해보기  (0) 2021.04.07
[코딩 공부_45] css, filter에 대하여  (0) 2021.04.06
[코딩 공부_44] self_introduce 만들기_2  (0) 2021.04.04
[코딩 공부_43] transform - translate, scale, skew, rotate?  (0) 2021.04.02

관련글

댓글

티스토리툴바