transition
- CSS 속성의 변화 값을 일정한 시간 동안 모션으로 전환 효과 주기 -
기존의 웹 환경에서 플래시를 사용하지 않고 모션 효과를 주기 위해서는
복잡한 JavaScript의 코드를 일일이 작성해야 했습니다.
그러나 CSS3의 transition을 사용하면 누구나 간단한 설정만으로도 직관적인 모션을 제작할 수 있고 효과가 탁월합니다.
이번에는 CSS3의 꽃이라고 할 수 있는 transition, 즉 전환 효과에 대해 알아봅시다.
필수 구문 정리
transition : 속성명 전환시간 가속도 설정 지연시간;
✨키포인트!
transition은 보토 가상 선택자 :hover를 이용해
마우스 오버 시 변경된 CSS 형태로의 전환 효과를 전환합니다.결과 화면
해당 <div>에 마우스 오버 시 시계 방향으로 45도 회전하면서 부드럽게 배경색이 변경됩니다.
코드
<!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>
div {
width: 400px;
height: 400px;
background: green;
margin: 100px auto;
transition: all 1s ease 0s;
}
div:hover {
transform: rotate(45deg);
background: violet;
}
</style>
</head>
<body>
<div></div>
</body>
</html>코드 해설
- 먼저 <div>의 넓이와 높이, 배경색 등의 모양을 잡아 준 뒤, transition을 설정합니다.
- 모든 CSS 속성의 변경사항에 대해서 1초의 시간 동안 가속도를 적용하여 지연시간 없이 전환 효과를 구현해라.
transition : all 1s ease 0s;
✔️ ease : 기본값으로, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다. - 위처럼 전환 효과를 적용하였으니
- 최종적으로 : hover 시에 변경될 CSS구문을 입력합니다.
- 여기서는 45도 회전과 함께 배경색을 violet을 설정했습니다.
✨키포인트!
transitio 구문의 위치는 변경 후인 :hover 부분이 아니라
변경이 일어나기 전인 원래의 태그 선택자입니다.Reference
- (Book) 인터랙티브 웹디자인 북
ease는 여러 가지가 있는데 어떤 차이일까?
- ease ; 천천-빠름-천천
- linear ; 등속
- ease-in ; 천천-보통
- ease-out ; 보통-천천
- ease-in-out ; 천천-보통-천천
- cubic-bezier ; 커스텀
- steps ; 뚝뚝 끊어 보여준다
Reference
transition ease ease-in ease-out ease-in-out 무슨 차이일까⚓LinkClick
transition ease ease-in ease-out ease-in-out 무슨 차이일까
style.css123.box { transition: all 0.2s ease;} 자연스러운 변화를 주기 위해서 사용하곤 했다 ease는 여러 가지가 있는데 어떤 차이일까? transition-timing-function 영상 편집할 때 영상의 앞뒤에 투명도를
chinsun9.github.io
CSS / 애니메이션 / transition / 속성을 서서히 변화시키는 속성⚓LinkClick
CSS / 애니메이션 / transition / 속성을 서서히 변화시키는 속성
transition transition은 속성을 서서히 변화시키는 속성입니다. transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한 번에 정합니다. IE는 버전 10부터 지원합니다. 문법 transit
www.codingfactory.net
'WEB > HTML&CSS' 카테고리의 다른 글
| [CSS] animation : 모션 만들기 (2) | 2023.02.08 |
|---|---|
| [HTML5] <video>태그 (0) | 2023.02.05 |
| [HTML] 띄어쓰기 3종류와 간격 확인하기. (  | &ensp | &emsp) (2) | 2023.01.09 |
| [CSS] 동그라미 만들기 (0) | 2023.01.04 |
| [HTML] HTML 웹사이트를 분석하는 꿀팁 (유투브 드림코딩 필기) (0) | 2023.01.04 |
댓글