Transition이란?
CSS 트랜지션은 시작 지점과 끝 지점을 서로 연결을 해 주는데 중간 과정을 부드럽게 만들어 주는 역할을 합니다. CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.
CSS, JavaScript, Class 활용의 차이
공용 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<!-- 간단한 버튼 hover 애니메이션 (색깔 변화) -->
<div class="buttons">
<button class="button use-css">웹 퍼블리싱</button>
<button class="button use-javascript">왕초보 시작반</button>
<button class="button use-class">웹개발 플러스</button>
</div>
<script src="script.js"></script>
</body>
</html>
1) CSS
.button {
padding: 5px 20px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
color: #e8344e;
background-color: white;
border: solid 2px #e8344e;
border-radius: 20px;
transition: all 0.3s ease-in-out;
}
/* button use-css */
.button.use-css:hover {
background-color: #e8344e;
color: white;
}
button에 관한 속성을 보면 transition이라는 부분이 있는데, 이 transition 안에 all이라고 적혀있는 부분은 transition을 적용하고 싶은 부분들을 적어 놓는 곳입니다. 만약 color에만 transition을 적용하고 싶은 경우 all대신 color를 적을 수 있지만 저희는 background-color와 color 모든 부분에 적용할 것이기 때문에 all을 적어줍니다.
0.3은 애니메이션의 속도를 말하며, ease-in-out 부분 같은 경우는 이 애니메이션이 어떤 알고리즘을 갖고 있는지, 즉 어떤 알고리즘이라면 어떤 방식으로 시작점과 끝점을 연결해 주는지 보여주는 부분입니다. ease-in-out은 처음에 시작할 때 천천히 시작하고 점점 속도가 빨라지다가 끝날 때쯤 다시 속도가 줄어드는 방식입니다.
.button.use-css:hover은 class = 'button use-css' 에 맞는 버튼에 hover, 즉 마우스 커서가 올라갔을 때 css를 변경해 준다는 의미입니다.
2) JavaScript
// button use-javascript
// mouseover, mouseout 시
// css 함수 사용
$(".button.use-javascript")
.mouseover(function () {
$(this).css({
backgroundColor: "#e8344e",
color: "white",
});
})
.mouseout(function () {
$(this).css({
backgroundColor: "white",
color: "#e8344e",
});
});
HTML body태그 안에 <script src>를 사용해서 같은 폴더 내에 있는 script.js 파일을 참조하도록 했습니다.
mouseover, mouseout을 활용해서 버튼에 커서가 올라가고 나갈때 지정해서 css를 변경해 주도록 했습니다.
3) class
/* button use-class */
.button.use-class.on {
background-color: #e8344e;
color: white;
}// button use-class
// mouseenter, mouseleave 시
// addClass, removeClass 함수 사용 css로 컨트롤
$(".button.use-class")
.mouseenter(function () {
$(this).addClass("on");
})
.mouseleave(function () {
$(this).removeClass("on");
});
class를 이용하여 transition을 적용할 때 JavaScript에서 mouseenter와 mouseleave를 사용합니다. mouseenter는 마우스가 올라가 있을 때를 의미하는데 마우스가 올라가 있을 때 on이라는 class를 적용하고, mouseleave는 마우스를 버튼 영역에서 나갔을 때를 의미하는데 마우스가 그 영역에서 나갈 시 on이라는 class를 제거합니다.
이렇게 세가지 방식으로 애니메이션을 구현하는 방법을 간단히 알아보았습니다!!
'Frontend > Css' 카테고리의 다른 글
| [TIL] CSS - display : fixed (0) | 2022.11.22 |
|---|---|
| [CSS] Media Query @media (0) | 2022.09.13 |
댓글