CSS를 작성하다가 transition을 주고 싶은데 CSS문서를 수정해서 저장하고 브라우저에 적용되었는지 직접 확인하는 과정이 귀찮을 수도 있다.
물론 직접 보는것이 가장 직관적 이지만 간단하게 미리 확인해볼 수 있는 유용한 사이트가 있다.
https://matthewlein.com/tools/ceaser
Ceaser - CSS Easing Animation Tool - Matthew Lein
Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them
matthewlein.com
위 사이트에 들어가면 그래프가 보이고 옆에 변수를 입력하는 칸이 있다.
Easing 탭에서 형태를 확인해볼수 있고
Duration 탭에서 얼마의 시간이 걸리게 할 것인지 정할 수 있다. (단위는 ms; Duration: 1000 = 1초)
마음에 드는 것이 있다면
transition: ??? 1s ease-out; 으로 이름을 넣던가
transition: ??? 1s cubic-bezier(0, 0, 0.58, 1); 으로 cubic-bezier를 사용해서 입력할 수 있다.
'IT > TMI' 카테고리의 다른 글
| 와이어 샤크(Wireshark) 칼럼 추가 하는 법 (0) | 2022.03.29 |
|---|---|
| Visual Studio Code(VSC) 기본 한글 폰트 바꾸기 - 맑은 고딕 (0) | 2021.12.28 |
| Visual Studio Code(VSC) Prettier 적용 및 적용 안될때 해결방안 (0) | 2021.12.26 |