- CSS에서 움직임을 구현할 수 있는 기능은 애니메이션 속성과 변형 속성으로 나뉨
- HTML 페이지 구성
<!DOCTYPE html>
<html>
<head>
<title>csse Transition Basic</title>
<style>
.box{
width: 100px; height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
- hover 상태 선택자와 active 상태 선택자를 사용
- 마우스를 태그 위에 올리거나 클릭하면 각각의 스타일 적용
<!DOCTYPE html>
<html>
<head>
<title>csse Transition Basic</title>
<style>
.box{
width: 100px; height: 100px;
background-color: orange;
}
.box:hover{
width: 200px;
height: 200px;
}
.box:active{
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
- transition-duration 속성 사용
- 구형 브라우저와 호환하려면 벤더 프리픽스를 이용한 transition-duration 속성 사용
- 코드를 실행하면 마우스를 태그 위에 올릴 때, 내릴 때 또는 누를 때 등등 2초 동안 변형 속성이 사용
<!DOCTYPE html>
<html>
<head>
<title>csse Transition Basic</title>
<style>
.box{
width: 100px; height: 100px;
background-color: orange;
-ms-transition-duration: 2s;
-moz-transition-duration: 2s;
-webkit-transition-duration: 2s;
transition-duration: 2s;
}
.box:hover{
width: 200px;
height: 200px;
}
.box:active{
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
- 변형 속성은 다음 스타일 속성과 함께 사용 가능
- 위치 속성 : top, left, bottom, right
- 크기 속성 : width, height
- 박스 속성 : margin, padding
- 테두리 속성 : border-width, border-radius, border-color
- 색상 속성 : color, background-color
- 투명도 속성 : opacity
- 변환 속성 : transform
🖨️ transition 속성
| transition |
모든 transition 속성 한 번에 지정 |
| transition-delay |
이벤트 발생 후 몇 초 후에 재생할지 지정 |
| transition-duration |
몇 초 동안 재생할지 지정 |
| transition-property |
어떤 속성을 변형할지 지정 |
| transition-timing-function |
수치 변형 함수 지정 |
🖨️ transition-delay 속성
- 이벤트가 발생하고 몇 초 동안 기다린 후 애니네이션이 작동할 지 지정하는 속성
- 수치 변형 함수를 바꾸고 싶으면 transition-timing-function 속성 사용
🖨️ transition-timing-function 속성
- 수치를 변경하는 함수를 지정할 때 사용하는 속성
- 마음에 드는 형태가 없다면 css3이 제공하는 cubic-bezier() 함수를 사용
- cubic-bezier() 함수는 1x1 크기의 사각형에서 두 점의 위치를 지정해 베지어 곡선을 만드는 함수
- cubic-bezier( x0, y0, x1, y1)
🖨️ transition-property 속성
- 각각의 속성에 다른 형태의 애니메이션을 적용하고 싶을 때는 transition-property 속성 사용
- css3 변형 속성은 기본 설정으로 변환 가능한 모든 스타일 속성에 애니메이션을 적용하게 만들어져 있음'
🖨️ animation 속성
| animation |
모든 animation 속성은 한 번에 적용 |
| animation-delay |
이벤트 발생 후 몇 초 후에 재생할지 지정 |
| animation-direction |
애니메이션 진행 방향 설정 |
| animation-duration |
애니메이션을 몇 초 동안 재생할지 지정 |
| animation-iteration-count |
애니메이션 반복 횟수 지정 |
| animation-name |
애니메이션 재생 상태 지정 |
| animation-play-state |
수치 변형 함수 지정 |
| animation-timing-function |
|
- 퍼센트 단위로 애니메이션 적용
- from 키워드와 to 키워드 사용
🖨️ animation-name 속성
- 태그를 키 프레임에 연결
- 원이 회전하면서 이동
- 애니메이션 속성은 반드시 코드 animation-name 속성과 animation-duration 속성을 사용해야함
🖨️ animation-iteration-count 속성
- 애니메이션을 특정 횟수만큼 반복하고 싶을 때 속성 사용
- 숫자를 적용하여 적용한 숫자만큼 애니메이션 반복
- 애니메이션을 무한 반복하고 싶다면 infinite 키워드 적용
🖨️ animation-direction 속성
| alternate |
from에서 to로 이동 후 to에서 from으로 이동 반복 |
| normal |
계속 from에서 to로 이동 |
- normal 키워드를 적용하면 같은 애니메이션이 계속 반복
- alternate 키워드를 적용하면 애니메이션이 from 형태에서 to 형태로 진행한 이후에 to 형태에서 from 형태로 이동
🖨️ animation-play-state 속성
- 애니메이션을 중지하고 재생할 때 사용하는 속성
- 태그가 이동하는 중간에 태그 위에 마우스를 올려놓으면 애니메이션이 일시 중지
- 자바스크립트를 사용해 조절