예전에는 애니메이션 효과를 주려면 자바스크립트를 이용했어야 했다. 하지만 요즘에는 CSS만으로도 애니메이션 효과를 주는 것이 가능하다! 다음의 코드를 보자.
a {
color: wheat;
background-color: tomato;
text-decoration: none;
border-radius: 5px;
font-size: 55px;
}
a:hover {
color: tomato;
background-color: wheat;
}
아직 transition을 쓰지 않은 코드이다. 결과를 확인해보자.
처음에는 위와 같다가 마우스를 갖다대면 아래 이미지로 변한다! 서서히 변하지 않고 갑작스럽게 휙 바뀌는 모습이다.
그럼 이에 애니메이션 효과를 주고 싶다면 어떻게 코드를 짜야 할까? 스타일 시트의 a태그에 다음의 코드를 추가해보자.
a {
color: wheat;
background-color: tomato;
text-decoration: none;
border-radius: 5px;
font-size: 55px;
transition: background-color 5s ease-in-out;
}
a:hover {
color: tomato;
background-color: wheat;
}마지막 줄에 transition이 추가되었다. ease-in-out은 아래에서 다뤄볼 내용이니 일단 신경쓰지 말자!
결과를 한번 확인해보자.
마우스를 갖다대면 배경색과 글씨색이 서서히 변하는 모습을 볼 수 있다! 이것이 transition의 효과이다.
따라서 transition은 어떤 상태에서 다른 상태로의 변화를 애니메이션으로 만드는 효과를 준다.
변화하는 부분이 background와 color이기 때문에 이를 transition에 써주었고 transition이 hover에서 변화하는 부분을 찾아 애니메이션을 준 것이다. 참고로 transition은 hover쪽에 있으면 안되고 위 코드와 같이 태그가 가장 처음 생겨난 곳(root에 있어야 한다.
참고로 코드를 위처럼 쓸 필요 없이 다음과 같이 써도 된다.
a {
color: wheat;
background-color: tomato;
text-decoration: none;
border-radius: 5px;
font-size: 55px;
transition: all 5s ease-in-out;
}마지막 줄에 all로 수정을 해주었다. 이렇게 써주면 변화하는 모든 것에 대해 애니메이션을 적용하게 된다.\
결과를 확인해 보아도 위와 같음을 알 수 있다!
위 코드에서 ease-in-out가 쓰였는데 이게 뭘까? 이는 ease-in-fuction의 일종인데 브라우저에게 변화하는 방법을 알려주는 역할을 한다. 그럼 어떤식으로 변화하는건지 다음의 사이트에 들어가서 직접 확인해보자.
https://matthewlein.com/tools/ceaser
Ceaser - CSS Easing Animation Tool - Matthew Lein
Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them
matthewlein.com
사이트에 들어가서 ease-in-out을 선택해보자. 그럼 다음과 같이 나올 것이다.
그래프를 해석해보면 기울기가 0부터 시작해 점점 커졌다가 중간 지점에서 최댓값을 찍고 점점 작아진다.
effect를 눌러 효과를 하나씩 확인해보자. 직접 눈으로 확인해보면 각각의 fucntion에 대한 효과가 감이 올 것이다!
그리고 그래프의 아래를 보면 이런 부분이 나오는데
여기서 핵심은 cubic-bezier() 이다. cubic-bezier() function은 CSS에서 transition 속성에서 전환 시작과 끝까지의 효과를 직접 제어하는데 쓰인다. 위 ease-in-out의 컨트롤 포인트값은(0.420, 0.000, 0.580, 1.000)임을 알 수 있다. 이를 코드에 적용해보자!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
a {
color: wheat;
background-color: tomato;
text-decoration: none;
border-radius: 5px;
font-size: 55px;
transition: all 5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
}
a:hover {
color: tomato;
background-color: wheat;
}
</style>
</head>
<body>
<a href="#">Go home</a>
</body>
</html>ease-in-out이 들어갈 자리에 cubic-bezier(0.42, 0, 0.58, 1)를 넣어주었다. 그리고 결과를 확인해보면 같은 효과를 가짐을 알 수 있다!
ease-in-out 말고도 여러가지 효과가 있으니 사이트에서 하나씩 확인해보고 적용해보도록 하자!!
'WEB > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] #21.Animations (0) | 2022.01.20 |
|---|---|
| [HTML/CSS] #20.Tranformations (0) | 2022.01.15 |
| [HTML/CSS] #18.Variable (Custom property) (0) | 2022.01.14 |
| [HTML/CSS] #17.Pseudo Selector2 (0) | 2022.01.14 |
| [HTML/CSS] #16.States (0) | 2022.01.11 |
