노마드코더/html+css (카카오클론-초급)
[Module #4] CSS (#4-2)
더 멋진 세상을 꿈꾸는 개발자
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에서 효과적으로 표현된다.