본문 바로가기

CSS

[css] cubic-bezier

반응형
.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

참고

반응형

'CSS' 카테고리의 다른 글

[CSS] 크롬과 shadow 관련  (0) 2022.01.20
[css] 디버깅  (0) 2022.01.20
[css] css 관련 요즘 추세 볼 수 있는 사이트  (0) 2022.01.20
[css] webkit keyframes  (0) 2021.03.16
[CSS] 부트스트랩, materialize, semantic-ui 사이트  (0) 2021.03.11