TIL #3 | CSS Animation ( feat. @keyframes, perspective)

JeongHoon Park·2021년 11월 9일
0
post-thumbnail

CSS Animation

transition, tranform

이전에 프로젝트할 때는 애니메이션을 크게 쓸일이 없었다. 단순히 카드이미지 위에 호버하면 크기가 약간 커지는 정도가 다였기 때문에 애니메이션에 대해서 이렇게 자세히 알아본건 이번이 처음이였다.

단순히 transition, transform과 hover만 이용해도 css를 동적으로 만들 수 있다.

<style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: all 2s;
    }
    div:hover {
      background-color: blue;
      transform: scale(2.5);
    }
  </style>

@keyframes

여기에 @keyframes를 이용한다면 더 자유롭게 원하는 애니메이션을 만들어줄 수 있다.

<style>
      @keyframes travel {
        0% {
          transform: translate(0px, 0px);
        }
        16.6% {
          transform: translate(200px, 0px);
        }
        33.3% {
          transform: translate(200px, 200px);
        }
        49.9% {
          transform: translate(0px, 200px);
        }
        66.6% {
          transform: translate(200px, 200px);
        }
        83.3% {
          transform: translate(200px, 0px);
        }
        100% {
          transform: translate(0px, 0px);
        }
      }
      div {
        width: 100px;
        height: 100px;
        background: pink;
        animation: travel 3s;
      }
    </style>

perspective

지금까지는 2차원의 움직임이였다. 하지만 perspective를 이용하면 3차원을 움직이는 것처럼 꾸밀 수 있어진다.

<style>
      .cont-card {
        perspective: 800px; 
      }

      .item-card {
        width: 100px;
        height: 100px; 
        transform: scale(0.5) rotateY(360deg);
        background: #f2994a;
        transition: all 1.2s;
      }

      .item-card:hover {
        transform: scale(2) rotateY(0deg);
        background-color: aqua;
      }
    </style>
<!-- html -->
  <body class="cont-card">
    <div class="item-card">hello world</div>
  </body>

위와 같이 perspective를 이용해서 물체와 나와의 거리감을 표현할 수 있다.

마무리

오늘은 이렇게 css의 애니메이션 요소들에대해서 배웠다. 이전에는 자주 이용하지는 않았지만 애니메이션 요소를 잘 이용하면 웹페이지를 더 지루하지 않아 보이게 만들어줄 수 있어 다음 프로젝트에 적절히 이용해보면 좋을 것 같다.

profile
Develop myself, FE developer!

0개의 댓글