Chapter 6. 애니메이션

김승현·2021년 11월 1일
CSS국비수업
0

transform

  • 요소의 모양, 크기, 위치 등 변형시키는 속성
  • 2차원 변형 3차원 변형 제공

👨‍🎓 작성방법

선택자 { transform : 변형함수 ;}
  • 2차원 변형 함수
변형 함수의미
translate(x,y)지정한 크기만큼 x축, y축으로 이동
translateX(x)지정한 크기만큼 x축(가로)으로 이동
translateY(y)지정한 크기만큼 y축(세로)으로 이동
scale(x,y)지정한 크기만큼 x,y축으로 확대/축소 (크기는 숫자만)
scaleX(x)지정한 크기만큼 x축(가로) 방향으로 x만큼 확대/축소
scaleY(y)지정한 크기만큼 y축(세로) 방향으로 y만큼 확대/축소
rotate(deg)지정한 각도만큼 회전 (단위는 deg)
skew(x,y)지정한 각도만큼 x축과 y축으로 요소 변형 (단위는 deg)
skewX(deg)지정한 각도만큼 x축으로 요소 변형
skewY(deg)지정한 각도만큼 y축으로 요소 변형

✍ translate 작성 예시

<head>
    <meta charset="UTF-8">
    <style>
        div {
            box-sizing: border-box;
        }

        #wrapper {
            width: 300px;
            height: 300px;
            background-color: yellow;
            
            transform: translate(-250px, 300px);
        }

        #contents {
            width: 80%;
            height: 100%;
            float: left;
            background-color: aqua;
            text-align: center;
            font-size: 40px;
            line-height: 300px;
        }

        #btn {
            width: 20%;
            height: 100%;
            float: left;
            font-size: 40px;
            text-align: center;
            padding-top: 110px;
        }

        #wrapper:active {
            
            transform: translate(-10px, 300px);
        }

    </style>
</head>

<body>
    <div id="wrapper">
        <div id="contents">숨겨진 메뉴</div>
        <div id="btn">▶</div>
    </div>
</body>

✍ scale 작성 예시

<head>
    <meta charset="UTF-8">
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: yellow;

            transform: translate(300px, 300px);
        }

        div:hover {
            /* 순서 중요 */
            transform: translate(300px, 300px) scale(0.5, 0.5);
        }

    </style>
</head>

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

✍ rotate 작성 예시

<head>
    <meta charset="UTF-8">
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: yellow;            
        }

        div:hover {
            transform: rotate(30deg);
        }

    </style>
</head>

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

✍ skew 작성 예시

<head>
    <meta charset="UTF-8">
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: yellow;            
        }

        div:hover {
            
            /* X축으로만 30도 => skewX(30deg)와 동일. */
            /*transform: skew(30deg);*/
            
             /* Y축으로만 30도 */
            /*transform: skewY(30deg);*/
            
            
             /* X축 30도, Y축 30도 */
            transform: skew(30deg, 30deg);
        }

    </style>
</head>

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



transition

  • 웹 요소의 스타일이 바뀌는 것을 의미
  • css로 애니메이션 같은 효과를 낼 수 있음
속성값의미
transition-property적용할 속성 선택
transition-duration진행되는 시간
transition-timing-functiontransition의 진행 속도를 조절

    - cubic-bezier(n,n,n,n) : n에는 0부터 1까지의 수 (소수점 가능)
    - ease : cubic-bezier(0.25,0.1,0.25,1)과 같음 (기본값)
    - linear : cubic-bezier(0,0,1,1)과 같음
    - ease-in : cubic-bezier(0.42,0,1,1)과 같음
    - ease-out : cubic-bezier(0,0,0.58,1)과 같음
    - ease-in-out : cubic-bezier(0.42,0,0.58,1)과 같음
    - initial : 기본값으로 설정
    - inherit : 부모 요소의 속성값을 상속
transition-delay트랜지션 지연 시간
transitiontransition 의 속성들을 모아서 작성
transition: property timing-function duration delay | initial | inherit

▶ bezier 값에 따른 속도 참고 사이트


✍ transition-property / transition-duration / transition 작성 예시

  <head>
    <meta charset="UTF-8">
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        
        div:hover{
            width: 800px;
            height: 200px;
            
            /*transition: width 5s, height 5s;*/
            
            transition-property: width height;
            transition-duration: 5s;
        }

    </style>
</head>

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

✍ transition-timing-function 작성 예시

<head>
    <meta charset="UTF-8">
    <style>
        #div1 {
            background-color: yellow;
        }

        .div-child {
            border: 1px solid black;
            width: 50px;
            height: 50px;
            background-color: red;
            margin-bottom: 30px;
        }

        #div1:hover>* {
            transition-duration: 2s;
            transition-property: width;
        }

        #div1:hover>:nth-child(1) {
            width: 800px;
            transition-timing-function: cubic-bezier(0, 0.1, 0.2, 1);
        }

        #div1:hover>:nth-child(2) {
            width: 800px;
            transition-timing-function: ease;
        }

        #div1:hover>:nth-child(3) {
            width: 800px;
            transition-timing-function: ease-in;
        }

        #div1:hover>:nth-child(4) {
            width: 800px;
            transition-timing-function: ease-in-out;
        }

        #div1:hover>:nth-child(5) {
            width: 800px;
            transition-timing-function: ease-out;
        }

        #div1:hover>:nth-child(6) {
            width: 800px;
            transition-timing-function: linear;
        }

    </style>
</head>

<body>
    <div id="div1">
        <div class="div-child"></div>
        <div class="div-child"></div>
        <div class="div-child"></div>
        <div class="div-child"></div>
        <div class="div-child"></div>
        <div class="div-child"></div>
    </div>

</body>

✍ transition-delay 작성 예시

<head>
    <meta charset="UTF-8">
    <style>
        #div1 {
            background-color: yellow;
        }

        .div-child {
            border: 1px solid black;
            width: 50px;
            height: 50px;
            background-color: red;
            margin-bottom: 30px;
        }

        #div1:hover>:nth-child(1) {
            width: 800px;
            transition-property: width;
            transition-duration: 3s;
            transition-timing-function: cubic-bezier(0, 0.1, 0.2, 1);
        }

        #div1:hover>:nth-child(2) {
            width: 800px;
            transition-property: width;
            transition-duration: 3s;
            transition-timing-function: cubic-bezier(0, 0.1, 0.2, 1);
            transition-delay: 2s;
        }

    </style>
</head>

<body>
    <div id="div1">
        <div class="div-child"></div>
        <div class="div-child"></div>
    </div>

</body>

✍ transition 작성 예시

<head>
    <meta charset="UTF-8">
    <style>
        #div1 {
            background-color: yellow;
        }

        .div-child {
            border: 1px solid black;
            width: 50px;
            height: 50px;
            background-color: red;
            margin-bottom: 30px;
        }

        #div1:hover>:nth-child(1) {
            width: 800px;
            transition-property: width;
            transition-duration: 2s;
            transition-timing-function: ease;
            transition-delay: 1s;
        }

        #div1:hover>:nth-child(2) {
            width: 800px;
            transition: width ease 2s 1s;
        }

    </style>
</head>

<body>
    <div id="div1">
        <div class="div-child"></div>
        <div class="div-child"></div>
    </div>

</body>



animation

  • 요소에 적용되는 css 스타일을 다른 css 스타일로 부드럽게 전환 시켜 줌
  • 트랜지션과는 다르게 keyframe을 사용하여 중간 스타일을 적용할 수 있음
속성값의미
animation-duration한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지를 지정
animation-delay엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정
animation-direction애니메이션이 종료되고, 다시 처음부터 시작할지 역방향으로 진행할지를 지정

구분값
- normal : 처음부터 끝까지 진행
- reverse : 끝에서 처음으로 반대로 진행
- alternate : 처음부터 끝까지 간후 다시 처음으로
- alternate-reverse : 끝에서 처음으로 진행후 다시 끝으로
animation-iteration-count애니메이션이 몇 번 반복될지 지정 (infinite 값으로 지정하여 무한히 반복할 수 있음)
animation-name애니메이션의 중간 상태를 지정 (중간 상태는 @keyframes 규칙을 이용하여 기술)
animation-play-state애니메이션을 멈추거나 다시 시작할 수 있음
animation-timing-function중간 상태들의 전환을 어떤 시간 간격으로 진행할지 지정
animation-fill-mode애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정

구분값
- none : 아무것도 지정되지 않은 상태
- forwards : 애니메이션이 키 프레임의 100% 도달했을 때 마지막 키프레임 유지
- backwards : 애니메이션의 스타일을 애니메이션이 실제로 시작되기 전에 미리 적용
- both : forwards, backwrads 모두 적용

keyframes

  • 애니메이션은 keyframes를 이용하여 중간상태의 속성을 설정 가능

👨‍🎓 작성방법

@keyframes 이름{
    from { 시작속성}
    n% { 중간 속성}
    n% { 중간 속성} ....
    to {끝 속성}
}



✍ 작성 예시-1

<head>
    <meta charset="UTF-8">
    <style>
        div {
            background-color: yellow;
            width: 100px;
            height: 100px;

        }

        div:hover {
            animation-name: test;

            animation-duration: 2s;

            animation-direction: alternate;

            animation-iteration-count: 2;
        }

        @keyframes test {
            from {
                width: 100px;
            }

            30% {
                background-color: aqua;
            }

            70% {
                background-color: red;
            }

            to {
                background-color: darkgreen;
                width: 500px;
            }
        }
    </style>
</head>

<body>

    <div></div>

</body>



✍ 작성 예시-2

<head>
    <meta charset="UTF-8">
    <style>
        #wrap {
            border: 1px solid black;
            width: 1000px;
            height: 500px;
        }

        #ball {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: relative;
            border-radius: 100px;

            animation-name: test;
            animation-duration: 3s;
            animation-direction: alternate-reverse;
            animation-iteration-count: infinite;
        }

        @keyframes test {
            0% {
                background-color: red;
                left: 0%;
                top: 80%;
            }

            25% {
                background-color: blue;
                left: 10%;
                top: 20%;
            }

            50% {
                background-color: blue;
                left: 30%;
                top: 80%;
            }

            75% {
                background-color: blue;
                left: 50%;
                top: 40%;
            }

            100% {
                background-color: blue;
                left: 80%;
                top: 80%;
            }
        }

    </style>
</head>

<body>

    <div id="wrap">
        <div id="ball"></div>
    </div>

</body>
profile
김승현
개발자로 매일 한 걸음
이전 포스트

Chapter 4. CSS 레이아웃 스타일

다음 포스트

Chap 1. JavaScript 개요

0개의 댓글