본문 바로가기
html, css, bootstrap

css_transition

by 신방동불주먹 2022. 11. 11.

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