transition은 "전환"이라는 뜻을 가지고 있고,
CSS의 여러가지 효과(속성)들에 값이 변경 되었을 때 그 전환을 부드럽게 하는 기능을 말합니다.
예를 들어 폰트가 10이었다가 마우스를 올렸을 때 폰트를 100으로 변경한다고 했을 때
10에서 100이 한번에 탁 변하는 것과 부드럽게 변하는 것 중 사용자들을 부드럽게 전환되는 것을 더 선호 합니다.
이때 이 전환을 transition을 통해 조작 할 수 있습니다.
첫번째 예제
<!DOCTYPE html>
<html>
<head>
<style>
a {
font-size: 3rem;
display: inline-block;
transition-property: transform font-size;
/* 장면 전환 효과를 누구에게 줄 것인가 */
transition-duration: 1s;
/* 장면 전환을 몇초 동안 진행 할 것인가 */
transition: font-size 1s, transform 2s;
/* 축약형 */
}
a:active {
transform: translate(20px, 20px);
font-size: 2rem;
}
</style>
</head>
<body>
<a href="#">Click</a>
</body>
</html>transition-property => 장면 전환 효과를 어떤 엘리먼트에게 줄 것인가
transition-duration => 장면 전환 효과를 몇초 동안 지속 할 것인가
축약형 => transtion: propery duration;
복수 설정 시 => transition: property duration, property duration;
두번째 예제
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
transition: all 5s;
}
div {
background-color: black;
color: white;
padding: 10px;
width: 100px;
height: 100px;
transition: height 1s;
transition-delay: 1s;
/* 장면 전환에 딜레이(시간차)를 주고 싶을 때 사용한다. */
transition-timing-function: ease;
/* 균일하지 않게 장면 전환을 하고 싶을 때 사용한다. */
}
div:hover {
height: 400px;
}
</style>
</head>
<body onload="document.querySelector('body').style.backgroundColor='white'">
<div>transition</div>
</body>
</html>transition-delay => 장면 전환에 딜레이(시간차)를 주고 싶을 때 사용한다.
transition-timing-function => 균일하지 않게 장면 전환을 하고 싶을 때 사용한다.
onload => 자바스크립트 용어로, 웹페이지가 화면에 표시 되었을 때
즉, 로딩 되었을 때(끝났을 때) 실행하는 함수를 말합니다.
transition-timming-function 만들기 사이트
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
'프레임워크 > CSS' 카테고리의 다른 글
| [생활코딩] 코드 경량화(minify) (0) | 2022.02.07 |
|---|---|
| [생활코딩] link & import (0) | 2022.02.06 |
| [생활코딩] transform (0) | 2022.02.05 |
| [생활코딩] blend (0) | 2022.02.05 |
| [생활코딩] filter (0) | 2022.02.05 |
댓글