@import "../../common/modern-reset.css";
@import "../../common/base.css";

h1,
h2 {
  margin-block: 1rem;
}

.transition-box {
  color: white;
  border: 1px solid red;
  background-color: slateblue;
  padding: 1rem;
  inline-size: 300px;
  margin-block-start: 20px;
  /* transition-property: color, background-color, transform;
  transition-duration: 1s, 1s, 1s;
  transition-delay: 0s, 1s, 2s; */

  transform-origin: left top;
  transition: color 1s 0s, background-color 1s 1s, transform 1s 2s;

  &.is--animation {
    color: red;
    background-color: var(--gray);
    transform: scale(2) translate(100px, 0);
  }
}

.transform-box {
  color: white;
  border: 1px solid red;
  background-color: green;
  transform-origin: left top;
  padding: 1rem;
  inline-size: 300px;
  margin-block: 20px;
  margin-inline: auto;
  transition: all 2s;

  &.is--animation {
    scale: 1.5;
    translate: 100px 0;
    rotate: 3.5turn;
  }
}

/* CSS 애니메이션 */
@keyframes fadeEffect {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fade-box {
  inline-size: 200px;
  block-size: 200px;
  border: 2px solid red;
  background-color: gray;
  text-align: center;
  align-content: center;
  margin-block: 1rem;

  @media (prefers-redueced-motion) {
    animation-play-state: paused;
  }

  &.is--animation {
    /* animation-name: fadeEffect;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-play-state: running; */

    /* animation 이름하고 시간은 반드시 있어야 함 단축 표기법 */
    animation: fadeEffect 4s forwards infinite alternate ease-in-out running;

    &.fade-box2 {
      animation-delay: 2s;
    }
  }
}