transition-timing-function의 이상한 곡선을 GUI로 자작

출처 : transition-timing-function-CSS3 참조

이 이상한 곡선을 여러분이 가지고 있는 브라우저로 자작합니다.

만들기

Google 크롬 또는 Firefox를 시작합니다. (이하 화상은 모두 Firefox의 것이 됩니다)
개발자 도구를 엽니다.
Inspector 탭을 선택합니다.transition 가 설정된 위치를 style/규칙에서 찾습니다.



이미지의 ease-in-out 옆에 있는 재미 있는 아이콘을 클릭하십시오.
그러면 transition-timing-function 커브가 표시된 패널이 열립니다.



이미지의 검게 보이는 포치를 그리그리 움직이면 좋아하는 곡선을 작성할 수 있습니다.



패널을 닫으면 아~라 이상하다ease-in-out 가 cubic-bezier(0,1.54,1,-0.59) 로 바뀌지 않습니까?

-webkit-transition-timing-function: cubic-bezier(0,1.54,1,-0.59);

이것으로 -webkit-transition-timing-function 의 완성입니다.

그리고는 이것을 CSS에 쓸 뿐.

style.css

.test {
  transition: 1s cubic-bezier(0,1.54,1,-0.59);
}