-
[Module #4] CSS (#4-2)노마드코더/html+css (카카오클론-초급) 2020. 4. 3. 13:54
Module #4 = advanced CSS
#4-2.
what are transitions?
트랜지션은 -이동/변경-을 멋지게 보여주는 효과이다.
이 경우, 박스가 hover될 때 색상만 바뀌고 다른 transition은 일어나지 않는다.
그냥 변경만 될뿐, 그 사이엔 아무런 애니메이션이 없음.
트랜지션을 적용하려면, 무엇을 변경할 지 적어주면 된다.
배경색을 5초 안에 바꾸라고 설정해보자.
애니메이션은 ease-in-out으로. (스르륵~~ 나타나고 스르륵~~ 사라지는 효과)
transition: background-color 5s ease-in-out; 추가.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>transitions</title> <style> .box { background-color: blueviolet; color: white; transition: background-color 5s ease-in-out; } .box:hover { background-color: brown; } </style> </head> <body> <span class="box">Text</span> </body> </html>이렇게 box css안에 트렌지션 추가하면 애니메이션이 생김!
여기서, hover 할때,
배경색 뿐 아니라 글자 색까지 모두 애니메이션 효과를 주면서 바꾸고 싶다면??
transition: all 1s ease-in-out; -->> "background-color"라고 지정했던걸 "all"로 변경해주면 된다!
이번엔 State를
hover가 아니라 active, focus, visited 바꿔보아라.
참고로 트랜지션은 focus, active, hover에서 효과적으로 표현된다.
'노마드코더 > html+css (카카오클론-초급)' 카테고리의 다른 글
#1.2 ES5, ES6 ES?! and JS (0) 2020.04.20 카카오톡-클론코딩과정 (0) 2020.04.07 #4-4 Animations (0) 2020.04.04 [Module #4] CSS (#4-3) (0) 2020.04.03