CSS 애니메이션 연습하기01

CSS 애니메이션 연습하기

오늘은 간단하게 css 애니메이션을 이용해서 굴러가는듯한 박스를 만들어 보겠습니다.

---

결과

HTML

HTML에는 뭐 만들거 없이 div태그로 박스를 하나 만들어줍니다.

<div class="box"></div>

CSS

구조는 어렵지 않습니다. 배경색은 그라데이션 효과를 이용해서 색을 넣었습니다. 박스의 크기값을 50px 50px position absolute를 이용해 가운데에 만들고, before라는 가상변수를 만들어 바닥에 그림자를 만든후에, after라는 가상변수는 애니메이션 효과를 주어 각각 0~100퍼센트 사이에 y축으로 이동하고, 22.5도씩 회전시켜서 굴러가는듯한 이미지를 만들었습니다.

body {
    height: 100vh;
    background-image: linear-gradient(to top, greenyellow, skyblue);
}
  
.box {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
  
.box::before {
    content: '';
    width: 50px;
    height: 5px;
    background: #000;
    position: absolute;
    top: 58px;
    left: 0;
    border-radius: 50%;
    opacity: 0.2;
    animation: shadow 0.6s linear infinite;
}
  
@keyframes shadow {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.2, 1);
    }
    100% {
      transform: scale(1, 1);
    }
}
  
.box::after {
    content: '';
    background: yellow;
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 3px;
    animation: load 0.6s linear infinite;
}
  
@keyframes load {
    17% {
      border-bottom-right-radius: 3px;
    }
    25% {
      transform: translatey(9px) rotate(22.5deg);
    }
    50% {
      transform: translatey(18px) scale(1, 0.9) rotate(45deg);
      border-bottom-right-radius: 40px;
    }
    75% {
      transform: translatey(9px) rotate(67.5deg);
    }
    100% {
      transform: translatey(0px) rotate(90deg); 
    }
}

코드팬 보기