전환. 여러 효과들의 전환을 부드럽게 한다.
(7) transform은 적용할 요소가 block 이거나 inline-block일 때 동작한다. 따라서 display: inline-block으로 설정함.
(8) transition-property: 전환을 어느 효과에 줄지
(11) a:active 요소 a를 클릭했을 때 발생할 효과
결과:
* 8~9를 합쳐서 한 줄에 쓸 수 있다. 이렇게 쓰면 각 효과에 대해 시간을 다르게 설정할 수 있다는 장점이 있다.
transition: font-size 1s, transform 0.1s
transition-delay
설정한 시간 후 효과가 나타난다는 뜻
transition-timing-function
전환 속도를 균일하지 않게 설정
ease가 linear보다 자연스럽다. 따라서 ease가 기본 값이다.
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 lang="en">
<head>
<style>
div {
background-color: black;
color: white;
padding: 10px;
width: 100px;
height: 50px;
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); /* easeInOutBack */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* easeInOutBack */
}
div:hover {
height: 400px;
}
</style>
</head>
<body>
<div>TRANSITION</div>
</body>
</html>
결과:
javascript 추가
페이지가 로딩이 되면 background color가 검정색->흰색으로 바뀌게 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-color: black;
transition: all 1s;
}
div {
background-color: black;
color: white;
padding: 10px;
width: 100px;
height: 50px;
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); /* easeInOutBack */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* easeInOutBack */
}
div:hover {
height: 400px;
}
</style>
</head>
<body onload="document.querySelector('body').style.backgroundColor='white';">
<div>TRANSITION</div>
</body>
</html>
결과:
'html + css + javascript' 카테고리의 다른 글
| [css] minify(코드 경량화) (0) | 2024.02.07 |
|---|---|
| [css] link, import (0) | 2024.02.07 |
| [css] transform (1) | 2024.02.07 |
| [css] blend (0) | 2024.02.07 |
| [css] filter (0) | 2024.02.07 |