SCSS Keyframe Animation Basic

좌우반복 이동

HTML

  <div class="animation">

    <img src="../images/scsc.jpeg" alt="">

  </div>

 

SCSS

.animation{

    img{

        height: 100px;

        margin: 40% 40%;

        animation: move 1s ease 1s infinite alternate;

    }

}

@keyframes move {

    0% {

      transform: translatex(0);

    }

    100% {

      transform: translatex(50px);

    }

}

 

 

 

 

 

커졌다가 작아졌다가

HTML

  <div class="animation">

    <img src="../images/scsc.jpeg" alt="">

  </div>

 

SCSS

.animation{

    img{

        height: 100px;

        margin: 40% 40%;

        animation: newmove 1s ease 1s infinite alternate;

    }

}

@keyframes newmove {

    0% {

      transform: scale(1, 1);

    }

    100% {

      transform: scale(2, 2);

    }

}

 

 

 

 

 

제자리에서 회전하기

HTML

  <div class="animation">

    <img src="../images/scsc.jpeg" alt="">

  </div>

 

CSS

.animation{

    img{

        height: 100px;

        margin: 40% 40%;

        animation: rotate 1s ease 1s infinite alternate;

    }

}

@keyframes rotate {

    0% {

      transform: scale(1, 1);

    }

    50% {

      transform: rotate(180deg);

    }

    100% {

      transform: rotate(-270deg);

    }

}