Transition
📌 Transition
: 어떤 상태에서 다른 상태로 변화할 때 애니메이션을 만드는 것.
📌 사용법
: transition: (변화시킬 것) (변화할 시간) (추가 설정);
transition은 state가 없는 요소에 사용해야 함.
💡 (변화시킬 것)의 'all'은 모든 것을 바꾼다는 것을 의미.
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본 형식</title>
<link href="styles.css" rel="stylesheet"/>
<style>
html {
background-color: blanchedalmond;
}
a {
color: white;
background-color: salmon;
text-decoration: underline;
padding: 3px 5px;
border-radius: 5px;
transition: background-color 10s ease-in-out, color 5s ease-in-out;
}
a:hover {
color: salmon;
background-color: white;
}
</style>
</head>
<body>
<a href="#">This is Link</a>
</body>
</html>+ 추가 설명
링크 위에 마우스를 올리면 링크의 글자색과 배경색이 서서히 바뀐다.
ease-in function
📌 ease-in function
: 브라우저에게 애니메이션이 어떻게 변할 지 말해주는 것.
📌 종류
linear : 같은 속도로 좌우 이동.
ease-in : 뒤로 갈수록 빨라짐.
ease-out : 뒤로 갈수록 느려짐.
ease-in-out
cubic-bezier : 직접 설정 가능.
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
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본 형식</title>
<link href="styles.css" rel="stylesheet"/>
<style>
html {
background-color: blanchedalmond;
}
a {
color: white;
background-color: salmon;
text-decoration: underline;
padding: 3px 5px;
border-radius: 5px;
transition: color 2s cubic-bezier(0.6, 0, 0.735, 0.045), background-color 7s ease-in;
}
a:hover {
color: salmon;
background-color: white;
}
</style>
</head>
<body>
<a href="#">This is Link</a>
</body>
</html>+ 추가 설명
링크에 마우스를 올리면 글자색은 2초 동안 변화하고,
배경색은 7초 동안 변화한다.
'CSS' 카테고리의 다른 글
| [CSS] Animation (0) | 2022.09.19 |
|---|---|
| [CSS] Transform (0) | 2022.09.19 |
| [CSS] custom property (0) | 2022.09.15 |
| [CSS] Pseudo Element (0) | 2022.09.15 |
| [CSS] States (0) | 2022.09.15 |
댓글