4-1. Introduction
내가 배우게 될 것들 (간단하게?!)
- transition
- transformation
- animation
- media query
4-2. Transition
트랜지션 이란?
- 이동, 변경을 멋지게 보여주는 효과
<span class="box">TEXT</span><style>
.box {
background-color: green;
color: white;
}
.box:hover{
background-color: red;
}
</style>위의 코드대로 라면 텍스트 배경색이 그린색이고 마우스를 가져다 댔을 때, 배경색이 빨간색으로 바뀔 것이다. 그러나!
이렇게 그린에서 빨강으로 변경할 때 변화되는 모습(트랜지션) 에 효과가 없다.
그러니까 그냥 색상 변경만 될 뿐, 그 사이에 아무런 애니메이션이 없다.
- .box 에 트랜지션 적용해보기
: 먼저 무엇을 변경할 지 적어준다
transition을 적고 : 첫번째 무엇을? 백그라운드 색상을!, 두번째 몇초를 적용할거? 5초
?, 세번째 어떤 효과를 넣을꺼? 스르륵 나타나고 스르륵 사라지는 효과 (ease-in-out) 를 넣고 싶은데?
.box {
background-color: green;
color: white;
font-size: 20em;
transition: background-color 5s ease-in-out;
}
.box:hover {
background-color: red;
}-
결과는 잘 나옴, 하지만 5초동안 저 효과가 나오는 것이 너무 느리다! 0.5초로 바꿔봐~
-
이번엔 호버에 폰트색을 파랑으로 바꾸고 실행하면, 배경색만 트랜지션이 실행되고 폰트색은 마찬가지로 아무런 애니매이션이 없다. 그럼 폰트색과 배경색을 한번에 바꾸고 싶다면 어떻게 해야 할까?
-
transition: all (위에는 배경색만을 변경할 거라고 적었지만, 지금은 다바꾼다 해서 all!!)
<style>
.box {
background-color: green;
color: white;
font-size: 20em;
transition: all 5s ease-in-out;
}
.box:hover {
background-color: red;
color: blue;
}
</style>
<body>
<span class="box">TEXT</span>
</body>
</html>- 위의 hover 를 active 로 바꿔보면?
: 마우스를 길게 클릭을 해야 내가 지정한 트랜지션이 작동한다.결론 : transition은 이렇게 어떤 state가 바뀔 때 적용이 되는 것이다.
css states : hover, active, focus, visited
트랜지션은 작성한 property (e.g: background-color) 혹은 all 전체를 변경하는 효과를 주는 것이다. 글자색 'color' 라고 적으면 해당되는 값만 트랜지션 효과가 적용될 것이다.
진짜 마지막 요약, 결론
: 트랜지션은 css states 즉, 호버 액티브 포커스 비지티드 같은 애들이랑 같이 쓰이는 변화되는 모습에 효과를 주는 아이이다. 같이 쓰인다 에 100만개!
.