반응형
transition
사용법
transition: (셀렉트) (걸리는 시간) (변화하는형태)
대부분 셀렉트는 all로 지정
복수개를 셀렉트할 때는 " , " 로 연결
all로 모든 것을 선택
border-radius, text-color, font-size 등에도 적용 가능
여러가지 애니메이션
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
-linear: 속도 일정
-ease-in: 속도 처음에 느림
-ease-out : 속도 끝에서 느림
-ease-in-out: 속도 처음과 끝에 느림
cubic-bezier
애니메이션 커스톰마이징 해서 사용하는 것
반응형
'Frontend' 카테고리의 다른 글
| CSS) Animation (0) | 2020.11.01 |
|---|---|
| CSS) Transformations ( ++ 박스 라운드로 만들기) (0) | 2020.11.01 |
| CSS) Colors and Variables (0) | 2020.10.30 |
| CSS) pseudo selector -3 ( placeholder, selection, first-letter) (0) | 2020.10.30 |
| CSS) States (active, hover, focused, visited selector) (0) | 2020.10.30 |