1. CSS 애니메이션
요소의 현재 스타일을 다른 스타일로 변화
적용할 스타일은 이전 프레임에 적용하는 것이 아니라 초기 스타일에 적용
( css관련 속성 )
name: moving (애니메이션 이름)
duration : 3s (얼마동안)
count : infintite (몇 회 반복)
direction: alternate (왕복과 편도)
normal: 완료후 초기상태로
alternate : 한번 끝까지 하고 반대로 진행
reverse: 프레임을 거꾸로 진행
ex)
@keyframes 애니메이션{
from 혹은 0%{
처음에 적용할 스타일
}
정수% (50%, 70%.. 80%...){
중간 지점마다 적용할 스타일
}
to 혹은 100%{
마지막에 적용할 스타일
}
}
<입력코드>
<!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>
</head>
<body>
<h2>animation -1</h2>
<div class="box">
<h2>CSS Animation</h2>
</div>
</body>
</html>
<스타일 코드>
<style>
.box {
box-sizing: border-box;
border: 1px solid #000000;
margin-top: 100px;
margin-left: 100px;
padding: 20px;
height: 80px;
animation: moving 3s infinite alternate;
}
@keyframes moving {
from {
width: 170px;
background-color: ghostwhite;
padding-left: 10px;
opacity: 0.5;
transform: scale(0.5) rotate(30deg);
}
50% {
width: 300px;
background-color: honeydew;
opacity: 1;
padding-left: 140px;
transform: scale(1) rotate(-15deg);
}
100% {
width: 300px;
background-color: honeydew;
opacity: 1;
padding-left: 140px;
transform: rotate(-180deg);
}
}
</style>
<설명>
deg( 몇"도" 를 의미)
1. transform: scale(0.5) rotate(30deg); > 처음 박스의 크기 0.5 이고 30도 회전
2. transform: scale(1) rotate(-15deg); > 50% 일때 크기 1로 커짐. -15도 회전
3. transform: rotate(-180deg); > 50% 의 크기 상태에서 -180도로만 회전
'Class > Frontend' 카테고리의 다른 글
| [프론트 엔드 DAY10] (0) | 2022.05.25 |
|---|---|
| [프론트 엔드 DAY09] (0) | 2022.05.24 |
| [프론트 엔드 DAY08] (0) | 2022.05.23 |
| [프론트 엔드 DAY07] (1) | 2022.05.09 |
| [프론트 엔드 DAY06] (0) | 2022.05.02 |
댓글