애니메이션

 

/* 컬러 변수 */

:root {

  --point-color1: #5cd591;

  --point-color2: #907354;

  --txt-color-400: #96969696;

  --txt-color-500: #565656;

  --txt-color-600: #191919;

}

#wrap {

  height: 2000px;

}

/* box_wrap 문자를 포함하는 모든 요소 선택 */

[class*=box_wrap] {

  width: 1200px;

  height: 200px;

  border: 1px solid black;

  margin: 0 auto;

  position: relative;

}

[class*=box_wrap] .box {

  width: 100px;

  height: 100px;

  background: yellowgreen;

  position: absolute;

  left: 0;

  top: 0;

  background: url(../images/cha.png) no-repeat left top / contain ;

}

  .box_wrap .box {

  /* transition: all 또는 개별속성 , 시간 , [ease] 지연시간; */

  /* ease가 기본ㄴ값, 처음은 느리고 중간에 빠르다가 끝에서 ㅇ느려짐 */

  /* ease-in-out 반복ㅁ애니메이션에서 사용 */

  /* 호버에 적용시 호버에서만

  양쪽에 적어서 옵션 다르게 가능 */

  transition: transform 1s ;

}

.box_wrap:hover .box {

  transition: transform 3s;

  transform: translateX(1150px);

}

.box_wrap2 .box {

  transition: all 1s;

}

.box_wrap2:hover .box {

  /* transform: translate(800px, 100px) rotate(-720deg) scale(1.55) skewX(45deg); */

  transform: rotate(360deg);

  transform-origin: left top;

}

/* 자동 애니메이션 */

/* 키프레임함수는 카멜표기법(동사 + 명사) */

@keyframes moveCharacter {

  50% {

    transform: translateY(100px);

  }

  100% {

    transform:  translate(200px,100px);

  }

}

.box_wrap3 .box {

  animation: moveCharacter 2s forwards;

  /* 키프레임 100%에서 0%로 돌아가며 100%에서 멈추게 할 경우 forwards 사용 */

  /* animation-fill-mode: forwards; */

}

@keyframes moveCha {

  25% {

    transform: translateX(1100px);

  }

  50% {

    transform: translate(1100px,100px);

  }

  75% {

    transform: translate(0,100px);

  }

}

.box_wrap4 .box {

  animation: moveCha 6s infinite;

}

.box_wrap5 {

  height: 300px;

}

@keyframes rotateClock {

  50% {

    transform: rotateZ(-45deg);

  }

}

.box_wrap5 .clock {

  position: absolute;

  left: 50%;

  margin-left: -50px;

  width: 100px;

  transform: rotateZ(45deg);

  transform-origin: center top;

  animation: rotateClock 2s ease-in-out infinite ;

}

.box_wrap5 .clock .line {

  width: 4px;

  height: 100px;

  background: #000;

  margin: 0 auto;

}

.box_wrap5 .clock .box2 {

  height: 100px;

  border-radius: 50%;

  border: 1px solid #000;

  background: url(../images/cha.png) no-repeat center center / contain;

}