CSS

[css] cubic-bezier

우니010 2021. 3. 16. 16:48
반응형
.box {
  animation-name: boxKeyframes;
  -webkit-animation-duration: 170ms;
  -webkit-animation-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
}

@-webkit-keyframes boxKeyframes{
  from{
    background-color: rgba(0,0,0,0);
  }
  to {
    background-color: rgba(0,0,0,0.7);
  }
}

kutar37.tistory.com/entry/CSS-cubic-bezier%EB%9E%80

 

 

CSS : cubic-bezier란?

cubic-bezier란? cubic-bezier() function은 CSS에서 transition 속성 혹은 transition-timing-function 속성에서 전환 시작과 끝까지의 효과를 제어하는데 쓰인다. #target{ transition: all 0.5s cubic-bez..

kutar37.tistory.com

webzz.tistory.com/373

 

[CSS] animation-timing-function

animation-timing-function animation-timing-function 속성은 움직임의 속도를 정의합니다. animation-timing-function animation-timing-function 속성은 움직임의 속도를 정의합니다.. 특징 설명 기본 값 anima..

webzz.tistory.com

참고

반응형