반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>애니메이션</title>
<style>
/*
CSS 애니메이션 속성
@keyframes - 애니메이션이 바뀌는 지점을 지정
animation-delay - 시작 시간을 지정
animation-direction - 종료한 뒤 처음부터 시작할지 역방향으로 시작할지 지정
animation-duration - 실행 시간을 지정
animation-iteration-count - 반복 횟수를 지정
animation-name - 설정해 놓은 중간 상태를 지정
animation-timing-function - 키프레임의 전환 형태 지정
animation - 애니메이션 속성을 한꺼번에 묶어서 지정
@keyframes 속성
- 애니메이션의 시작과 끝을 비롯하여 상태가 바뀌는 부분
기본형 - @keyframes <이름> {
<선택자> { <스타일> }
}
animation-name 속성
- 애니메이션을 여러개 정의할 때 구별하는 이름
기본형 animation-name: <키프레임 이름> | none
animation-duration 속성
- 애니메이션을 얼마동안 재생할 것인지 설정
- 사용 단위는 초(s), 밀리초(ms),]] 기본값은 0
기본형 - animation-duration: <시간>
animation-direction 속성
- 애니메이션 진행 방향을 바꿈
기본형 - animation-direction: normal | reverse | alternate | alternate-reverse
속성값
normal - from -> to로 진행. 기본값
reverse - to -> from으로 진행
alternate - 홀수 번째는 normal로, 짝수번째는 reverse로 진행
alternate-reverse - 홀수 번째는 reverse로, 짝수 번째는 normal로 진행
animation-iteration-count 속성
- 반복 횟수 지정
기본형 - animation -iteration-count: <숫자> | infinte
속성값
숫자 - 반복횟수 지정
infinite - 무한 반복
animation-timing-function 속성
- 시작, 중간, 끝에서 속도를 지정하여 전체 속도 곡선을 만듬
기본형 - animation-timing-function: linear | ease | ease-in
ease-out | ease-in-out | cubic-bezier(n, n, n, n)
속성값(transition-timing-fuction 속성값과 동일)
ease - 처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝냄.
linear - 시작부터 끝까지 똑같은 속도로 진행
ease-in - 느리게 시작
ease-out - 느리게 끝냄
ease-in-out - 느리게 시작하고 느리게 끝냄
cubic-bezier(n, n, n, n) - 배지에 함수를 정의해서 사용
n의 값은 0~1 사이 값만 사용가능
*/
#container {
width: 500px;
height: 20px auto;
}
.box {
float: left;
width: 100px;
height: 100px;
margin: 50px;
}
#box1 {
background-color: #4cff00;
border: 1px solid transparent;
animation-name: shape;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#box2 {
background-color: #8f06b0;
border: 1px solid transparent;
animation-name: rotate;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes shape {
from {
border: 1px solid transparent;
}
to {
border: 1px solid #000;
border-radius: 50%;
}
}
@keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(45deg)
}
}
</style>
</head>
<body>
<div id="container">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 애니메이션</title>
<style>
/*
animation 속성
-animation 속성을 한꺼번에 지정
ex) .box {
animation-name: moving;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-direction: alternate;
animation-iteration-count: infinite;
}
.box {
animation: moving 3s alternate infinite ease-in
}
*/
.box {
width: 100px;
height: 100px;
margin: 60px auto;
animation: rotate 1.5s infinite,
background 1.5s infinite alternate;
}
@keyframes rotate {
from {
transform: perspective(120px) rotateX(0deg rotateY(0deg))
}
50% {
transform: perspective(120px) rotateX(0deg rotateY(0deg))
}
to {
transform: perspective(120px) rotateX(0deg rotateY(0deg))
}
}
@keyframes background {
from {
background-color: red;
}
50% {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
반응형
'IT > CSS' 카테고리의 다른 글
| CSS - 4일차 transition (0) | 2023.05.17 |
|---|---|
| CSS - 4일차 연결선택자, 가상클래스 (0) | 2023.05.17 |
| CSS - 3일차 속성선택자 (0) | 2023.05.15 |
| CSS - 3일차 background (0) | 2023.05.15 |
| CSS - 2일차 box-width, border-radius, box-shadow (0) | 2023.05.11 |