반응형
1. transition : 바꿀 대상
transition : backgroun-color 4s eas-in-out, color 5s ease-in-out ;
all 5s ease-in-out : 모든 대상에 효과를 준다
- 태그 자체가 생겨 난 곳에 적용해야 한다.
ex) a:hover {} 적용되지 않음
- 상태에 따라 바뀌는 요소가 있을 때 사용
ex) hover, active, focus..
2. ease-in-out :브라우저에게 변화 방법을 알려줌
linear - 변화 그래프가 직선
ease-in 시작과 끝이 빠름
ease0out 시작과 끝이 느림
ease-in-out- 시작이 빠르고 끝이 느림
all : 변화요소를 한번에 다룸
all 뒤에 소수 요소만 추가해도 작동
ex) transition: all 2s, color 20s;
cubic-bezier(좌표)로 마음대로 설정할수도 있다
반응형
'html, css, bootstrap' 카테고리의 다른 글
6.8 login form part one (0) | 2022.11.23 |
---|---|
css_flex 다시정리 (0) | 2022.11.21 |
css_states (0) | 2022.11.11 |
css_position (0) | 2022.11.11 |
css_flexbox (0) | 2022.11.11 |