[css] 바운스(Bounce ) 효과 만들기

- 사진 아이콘 사용하기 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  

 

- HTML 요소 

  <!--  바운스할 요소 -->
<div class="bounce">
    <i class="fa fa-camera-retro fa-lg"></i>
  </div>

 

- CSS 요소

div {
      margin-top: 100px;
      margin-left: 100px;
    }
    
    /* 0.5 초씩 바운스 효과 */
    .bounce { 
      position: relative;
      /* 파폭 */
      -moz-animation: bounce 0.5s infinite linear;
      /* 크롬 */
      -webkit-animation: bounce 0.5s infinite linear;
      -o-animation: bounce 0.5s infinite linear;
      animation: bounce 0.5s infinite linear;
    }

    /* 
      바운스의 높이 
      0% 일 때, 0px 
      50%일 때, -5px 
      70%일 때, -50px
      100%일 때, 0px 
      */
    @-webkit-keyframes bounce {
      0% {
        top: 0;
      }

      50% {
        top: -5px;
      }

      70% {
        top: -50px;
      }

      100% {
        top: 0;
      }
    }

    @-moz-keyframes bounce {
      0% {
        top: 0;
      }

      50% {
        top: -5px;
      }

      70% {
        top: -50px;
      }

      100% {
        top: 0;
      }
    }

    @-o-keyframes bounce {
      0% {
        top: 0;
      }

      50% {
        top: -5px;
      }

      70% {
        top: -50px;
      }

      100% {
        top: 0;
      }
    }

    @-ms-keyframes bounce {
      0% {
        top: 0;
      }

      50% {
        top: -5px;
      }

      70% {
        top: -50px;
      }

      100% {
        top: 0;
      }
    }

    @keyframes bounce {
      0% {
        top: 0;
      }

      50% {
        top: -5px;
      }

      70% {
        top: -50px;
      }

      100% {
        top: 0;
      }
    }

 

- 결과화면

 

See the Pen bounce by Nami (@NamuNami) on CodePen.