[CSS] 통통 튀는 바운스 애니메이션 구현하기

화면 메인에 이미지 로고에 통통! 튀는 바운스 움직임을 구현하였다. 이미지는 public/image 폴더에 넣어놓았고, css 파일에서 애니메이션을 추가해주었다~!

 

728x90

 

---

 

통통 튀는 바운스 애니메이션 구현하기

1. 애니메이션 만들기 : animation-name: bounce,  @keyframes bounce
2. 애니메이션 속성 값 지정하기 : animation-duration: 0.5s, animation-direction: alternate, animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035), animation-iteration-count: infinite

  

전체 코드

BounceAnimation.js

import React from "react";
import "./BounceAnimation.css";

function BounceAnimation () {
    return (
        <div class="container">
            <div class="logo" />
        </div>
    )
}

export default BounceAnimation;

 

BounceAnimation.css

:root {
    --drop-height: 20px;
    --logo-size: 30px;
    --offset: 100px;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    width: var(--logo-size);
    height: var(--logo-size);
    border-radius: 100%;
    background-image: url("/public/image/logo.png");
    background-size: cover;
    border-radius:50% 50% 50% 50%;
    cursor: pointer;
    
    animation-name: bounce; 
    animation-duration: 0.5s;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    animation-iteration-count: infinite;
}
  
@keyframes bounce {
    from { 
      transform: translateY(0) scale(1);
    }
    to   { 
      transform: translateY(var(--drop-height)) scale(1, 0.7);
    }
}

 

결과 화면