default로 가지고 있는 설정을 바꾸면 다른 것에도 영향을 미칠 수 있다
(button의 background-color만 바꿔도 border-radius가 사라진다)
state에서 바꾼 것은 element에 영항없음
element에서 바꾸면 state영향있음
Transition
state에서 property 변화가 있을 때 바뀌는 효과 조절 가능
transition: color 1s easy-in-out;
여러개는 뒤에 , 쓰고 이어붙임
state가 아닌 element 설정에 적용해야함
시간에따라 바뀌는속도 조절
linear ; 속도동일
ease-in; 처음에 부드럽게, 나중에 빨라짐
cubit-bezier로 만들 수 있다
transformation
다른 box요소를 변형시키지 않고 원하는 요소를 변화시킨다
다른 요소는 옆으로 이동하지 않음
transition과 transformation 동시에 사용하면 멋진 애니메이션 효과를 만들 수 있다.
'TIL' 카테고리의 다른 글
2020.09.11 (0) | 2020.09.16 |
---|---|
2020.09.10 (0) | 2020.09.11 |
2020.09.08 (0) | 2020.09.09 |
2020.09.07 (0) | 2020.09.08 |
2020.09.04 (0) | 2020.09.04 |