CSS / Animation

Animation

/*
   1. animation-name : 애니메이션 keyframes와 연결할 이름
   2. animation-delay : 애니메이션 실행을 특정 시간동안 지연시켜준다.
   3. animation-fill-mode : 애니메이션 실행 후 속성이 지속되게 한다(forwards 적용 시)
   4. animation-iteration-count : 애니메이션 실행 횟수 지정
   5. animation-direction : 애니메이션 변화 후 변화 이전으로 자동 계산하여 실행(alternate 적용 시)
   6. animation-duration : 애니메이션 지속 시간 지정

   - 선택 요소에는 어떻게 애니메이션을 적용할지 지정해야 한다.
   - 어떠한 애니메이션을 적용할지 keyframes를 만들어야 한다.
*/

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 200px;
  height: 200px;
  background: yellow;
  _animation-name: scale;
  _animation-duration: 1s;
  _animation-delay: 0.5s;
  _animation-iteration-count: 3;
  _animation-direction: alternate; /* 카운트 하나 당 한 방향 */
  _animation-fill-mode: forwards;
  _animation-timing-function: ease-in-out;
  /* 시간 설정 중 첫 번째는 duration, 두 번째는 delay */
  animation: scale 1s 0.5s 3 alternate forwards ease-in-out;
}

@keyframes scale {
  /* 0% {
    width: 200px;
    height: 200px;
    background: yellow;
  }
  100% {
    width: 400px;
    height: 400px;
    background: red;
  } */

  from {
    width: 200px;
    height: 200px;
    background: yellow;
  }
  to {
    width: 400px;
    height: 400px;
    background: red;
  }
}

Units

**p {
  font-size: 16px;
}

/* % 사용 시 가로의 경우 브라우저 가로가 기준이 될 수 있다. */
/* 하지만 높이의 경우 스크롤이 무한으로 늘어날 수 있기 때문에 상대 기준을 설정하지 못해 무시된다. */
/* .a {
  _width: 80%;
  _height: 100%;
  background: green;
}

.b {
  width: 200px;
  height: 200px;
  background: red;
}

body {
  height: 100vh;
  background: lightcyan;
  display: flex;
  align-items: center;
  justify-content: center;
} */

div {
  width: 100%;
  height: 100vh;
}

.a {
  background: yellowgreen;
  font-size: 25px;
}

.a > h2 {
  font-size: 30px;
}

.a > h3 {
  font-size: 1.5rem;
}

.b {
  background: lightcyan;
}

.c {
  background: lightskyblue;
}**

Transition

/*
- transition(전환)은 한 요소에 적용된 스타일의 속성값을 다른 속성값으로 변하게 하는 것을 말한다.
- transition의 적용은 전환 대상 요소에 지정한다.

1. transition-property : 전환 대상을 지정한다. 일반적으로 all로 모두 지정한다.
전환 대상 속성 참조 : <https://www.w3schools.com/cssref/css_animatable.asp>
2. transition-duration: 전환이 진행되는 시간을 지정한다.
3. transition-delay: 전환이 진행되기 전 지정 시간을 대기시킨다. 보통 잘 사용되지는 않는다.
4. transition-timing-function: 전환이 진행되는 속도를 지정한다. 특히 cubic-bezier는 속도를 지정할 수 있다.

#div1 {transition-timing-function: linear;} : 같은 속도
#div2 {transition-timing-function: ease;} : 빠른 속도 -> 느린 속도
#div3 {transition-timing-function: ease-in;} : 느린 속도 -> 빠른 속도
#div4 {transition-timing-function: ease-out;} : 느린 속도 -> 조금 빠른 속도 -> 빠른 속도
#div5 {transition-timing-function: ease-in-out;} : 조금 빠른 -> 느린 -> 조금 빠른 -> 빠른 속도
전화 대상 속성 : <https://www.w3schools.com/cssref/css_animatable.php>
*/

div {
  width: 100px;
  height: 100px;
  background: red;
  _transition-property: width; /* default: all - 일반적으로 all을 사용 */
  _transition-duration: 2s; /* ms: 밀리초 단위, s: 초단위 */
  _transition-delay: 0.5s;
  margin-top: 20px;

  transition: 0.5s; /* transition-property 생략 가능 : all이 디폴트, transition-timing-function 생략 가능 : ease가 디폴트 */
  /* cubic-bezier는 웹상의 generator를 사용하면 편하다 */
}

#div1 {
  transition-timing-function: linear;
}
#div2 {
  transition-timing-function: ease;
}
#div3 {
  transition-timing-function: ease-in;
}
#div4 {
  transition-timing-function: ease-out;
}
#div5 {
  transition-timing-function: ease-in-out;
}
#div6 {
  transition-timing-function: cubic-bezier(0.09, 1.24, 0.97, 0.09);
}

div:hover {
  width: 400px;
}