TIL

2020.09.09

joy_lee 2020. 9. 10. 10:58

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