본문 바로가기
웹 프로그래밍

[CSS] Animation(애니메이션), @keyframes(키프레임)

by Minius 2020. 6. 7.
반응형

웹에서 간단한 애니메이션을 사용하려면 jquery의 slideUp, slideDown, SlideToggle 등과 같은,

혹은 show, hide 같은 함수를 사용할 수 있습니다.

 

하지만 사용해보면 느끼게 되는 것이, 내가 생각한 것 처럼 움직여 주지는 않는다는 것입니다.

 

조금 더 부드럽게, 조금 더 빠르게, 조금 더 미세한 부분을 조정하고 싶은데 jquery로는 만족이 안됩니다.

 

그래서 그 이전에 배워서 사용해야 했던 것이 바로 CSS의 animation. 그에 따르는 @keyframes입니다.

 

제가 이전에는 잘 사용하지 않았는데, 요즘엔 눈에 보이는 것도 신경 쓸 여유가 생겼는지 욕심이 생깁니다.

 

그래서 여러 유튜브를 보다가 추천에 뜬 것이 바로

 

https://www.youtube.com/watch?v=nJ81DFmgHdU

 

여기입니다. 제가 본 유튜버중 가장 빠르고 쉽게 설명해주는 것 같습니다. 이 동영상을 보고 한번 정리하고싶어서 글을 쓰게 되었고, 제가 표준으로 삼는 w3c의 자료를 참고하였습니다.

 

https://www.w3schools.com/css/css3_animations.asp

 

CSS Animations

CSS Animations CSS Animations CSS allows animation of HTML elements without using JavaScript or Flash! CSS In this chapter you will learn about the following properties: @keyframes animation-name animation-duration animation-delay animation-iteration-count

www.w3schools.com

먼저 animation에 따르는 속성들,

PropertyDescription

@keyframes 애니메이션 코드를 작성하는 곳
animation 모든 애니메이션 속성을 간결하게 적는 곳
animation-delay 애니메이션의 시작을 지연시킵니다.(ms, s)
animation-direction 애니메이션이 앞으로향할지, 뒤로 향할지, 번갈아 오는지 정합니다.
animation-duration 애니메이션이 한 사이클을 도는 시간을 설정합니다.
animation-fill-mode 애니메이션이 시작하기 전이든, 후든 작동중이 아닐 때의 스타일을 정합니다.
animation-iteration-count 몇번 재생할지 정합니다.
animation-name 키프레임의 이름을 특정합니다.
animation-play-state 애니메이션이 작동할지 안할지 정합니다.
animation-timing-function 움직이는 방식을 설정합니다.

 

 


사용법은

/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes로 변수, 함수를 설정하듯 선언을 하고, 그 안에 내용을 적습니다.

그리고 animation 또는 animate-name에 선언 한 @keyframes의 이름을 적어 사용합니다.

 

 

 

@keyframes의 시작과 끝을 표시하는 방법은 두가지입니다.

 1. from, to

 2. 0% ~ 100%

 

첫번째 방법은 시작과 끝만 있습니다.

조금 더 자세하게 조정하고 싶다면 진행도를 %로 나타내어 조절할 수 있습니다.

 

 

 

각 속성을 간결하게 적고싶다면,

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
div {
  animation: example 5s linear 2s infinite alternate;
}

 

해당 방법으로 적을 수 있습니다.

 

앞에서부터 순서대로 사용하되, 뒤에 사용하지 않는 것은 안적어도 작동을 합니다.

 

 

 

이를 활용해 간단하게 만들어 보았습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <article>
                <h1>Main Story</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque omnis quo aliquam officiis unde, ipsam quidem minima eaque! Ullam dolorum, itaque quam facilis maiores sed unde quas modi sequi ut?</p>
            </article>
            <article>
                <h1>Another Story</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam natus quod totam itaque ipsa, perferendis, dolor accusamus vitae expedita, consectetur tempora modi iure numquam cupiditate.</p>
            </article>
        </section>
    </main>
</body>
</html>
body, ul{
    margin: 0;
    --a: 1000ms;
    --b: calc(1000ms + var(--a));
    --c: calc(1000ms + var(--b));
}

nav{
    height: 50px;
    background: navy;
    animation: nav-down var(--a);
}

li {
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
}

li:first-child{
    animation: li-comes-first var(--b);
}

li:last-child{
    animation: li-comes-last var(--b);
}

li a {
    line-height: 50px;
    text-decoration: none;
    color: white;
}

h1{
    animation: h1-comes var(--c);
}

p{
    animation: p-comes var(--c);
}

@keyframes nav-down{
    from{
        transform: translateY(-100%)
    }

    to{
        transform: translateY(0%)
    }
}

@keyframes li-comes-first{
    0%{
        transform: translateX(-100%);
    }

    100%{
        transform: translateX(0);
    }
}

@keyframes li-comes-last{
    0%{
        transform: translateX(100%);
    }

    100%{
        transform: translateX(0);
    }
}

@keyframes h1-comes{
    0%{
        transform: translateY(-100%);
        opacity: 0;
    }

    100%{
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes p-comes{
    0%{
        transform: translateY(-100%);
        opacity: 0;
    }

    100%{
        transform: translateY(0);
        opacity: 1;
    }
}

 

 

이번에 공부하면서 CSS의 var를 알 수 있었고,

VS의 기능 중 lorem+숫자를 하면 그 만큼의 입숨로렘 랜덤한 글자가 들어간다는 것도 배웠습니다.

 

하나를 배우려다가 3개를 배워가니 뿌듯합니다.

저작자표시

'웹 프로그래밍' 카테고리의 다른 글

[JS] INPUT TYPE="NUMBER" +,- 입력 방지  (0) 2020.06.23
[CSS] Transition으로 부드럽게 움직이는 방법  (0) 2020.06.12
[CSS] Arrowbox  (0) 2020.06.06
[JS] Navigator.share | 휴대폰 공유  (0) 2020.06.04
[JS] URL COPY TO CLIPBOARD, URL 주소 클립보드에 복사하기  (0) 2020.06.03

관련글

댓글

티스토리툴바