[html][css] 애니메이션 transition속성 / transition-property, transition-duration,transition-timing-function

css속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션

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

.box{
  width:100px;
  height: 300px;
  background: gray;
  margin: 30px;
  transition-property: width, background;
  transition-duration: 1s;
}
.box:hover{
  width:300px;
  background: dodgerblue;
}

transition은 변하기 전 요소에 적어주면 된다.

 transition: width 1s, background 1s;

이렇게 단축 속성으로 적을 수 있다.

 

 

 

---

transition-property

전환 효과를 사용할 속성 이름을 설정

  transition: all 1s;

  transition: 1s;

둘다 같은 뜻이다.

위와 같은 효과를 낸다. 

하지만 속성과 시간을 따로 적으면 속성마다 따로 적용된다.

 

---

transition-duration

전환 효과의 지속시간을 설정

 

---

transition-timing-function

타이밍 함수 (애니메이션 전환 효과를 계산하는 방법) 지정

ease : 빠르게 - 느리게

linear: 일정하게

ease-in : 느리게 - 빠르게

ease-out: 빠르게- 느리게

ease-in-out: 느리게-빠르게-느리게

cubic-bezier(n,n,n,n) : 자신만의 값을 정의 (0~1)

steps(n) : n번 분할된 애니메이션

  transition:2s steps(4);