CSS transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>seongmin times</title>
<style>
a {
color: white;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
font-size: 55px;
transition: background-color 10s ease-in-out, color 5s ease-in-out;
}
a:hover {
color: tomato;
background-color: wheat;
}
</style>
</head>
<body>
<a href="#">Go home</a>
</body>
</html>
transition을 주지 않으면 에니메이션이 없어서 이쁘지 않다. javascript를 사용해도 되지만 CSS에서 좋은 구문을 제공합니다. transition을 주는데 가령 anchor에게 주었습니다 a:hover는 앵커에 마우스커서를 호버링할때인데 이는 state값으로서 여기다가 transition을 주는 실수를 하지맙시다. 이유는 마우스 호버링이 끝나면 바로 바뀌어버리고 transition이 원활하게 끝맺지 못하기 때문입니다.
transition은 우리가 알고있는 거의 모든 state에 반응합니다. 갸령 hover, active, focus, focus-within등에 작동합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>seongmin times</title>
<style>
a {
color: white;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
font-size: 55px;
transition: all 0.5s ease-in-out;
}
a:hover {
color: tomato;
background-color: wheat;
}
</style>
</head>
<body>
<a href="#">Go home</a>
</body>
</html>
attribute value값으로 all 0.5 ease-in-out. 이렇게 줘도 된다. 그러면 바뀔수 있는 state값이 바뀝니다. 가장 일반적으로 많이 쓰는 방법은 "all"을 사용하는겁니다. all (시간) (cubic-bezier); 이런식으로 작성을 합니다.
하지만 이는 모든 프로퍼티를 바꾸는 방법으로 원하는 프로퍼티만 바꾸는 방법이 있습니다. 가령 배경색만 바꾸고 싶다면,
background-color (시간) (cubic-bezier)이런식이면 됩니다.
또한 선택한 여러개를 바꾸고 싶다면 transition끝에 콤마(,)만 써주면 됩니다. 아래는 예시입니다.
transition: bacground-color 5s ease-in-out, color 1s ease;
ease-in function
ease-in function 중 디폴트로 가지고있는건 linear, ease-in, ease-out, ease 입니다. 그 외 여러가지들이 있는데 같아보여도 차이가 미세하게들 있습니다. 그 차이를 웹브라우저로 만들면서 보기에는 차이가 확 와닫지 않으므로 유용한 사이트에서 차이점을 알아봅시다.
https://matthewlein.com/tools/ceaser
Ceaser - CSS Easing Animation Tool - Matthew Lein
Ceaser CSS Easing Animation Tool 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 pretty. I love th...
matthewlein.com
이 사이트의 ceaser파트에서 CSS easeing animation 툴의 차이점을 시각적으로 확인해볼 수 있습니다.
cubic-bezier
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>seongmin times</title>
<style>
a {
color: white;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
font-size: 55px;
transition: all 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
a:hover {
border-radius: 30px;
color: tomato;
background-color: wheat;
}
</style>
</head>
<body>
<a href="#">Go home</a>
</body>
</html>
cubic-bezier 는 또다른 프로퍼티로서 나만의 커브를 만들 수 있도록 합니다. 나만의 애니메이션에 가속, 감속등을 포함시켜서 만들 수 있습니다. 내 취향것 만들 수 있다는 장점이 있습니다.
'HTML-CSS > CSS' 카테고리의 다른 글
| CSS Border Box (0) | 2021.03.21 |
|---|---|
| CSS Media Queries (0) | 2021.03.21 |
| CSS Animation (0) | 2021.03.21 |
| CSS transform (0) | 2021.03.21 |
