css 애니메이션은 자바스크립트를 모르더라도 간단하게 움직이는 애니메이션을 만들 수 있습니다.
html
간단하게 눈이 될 부분과 움직이는 입모양이 될 부분으로 클래스를 따로 지정해줍니다
<body id="loading1">
<div class="wrap2">
<div class="round">
<div class="circle"></div>
<div class="circle2"></div>
</div>
<div class="loading1">
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
</div>
</div>css
#loading1{
margin: 0;
padding: 0;
}
.loading1{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 40%;
display:flex;
align-items: center;
}
.obj{
width: 6px;
height: 40px;
background: black;
margin: 0 3px;
border-radius: 10px;
animation: loading 0.8s infinite;
}
@keyframes loading{
0%{
height: 0;
}
50%{
height: 40px;
}
100%{
height: 0;
}
}
.round{
position:absolute;
top: 42%;
left: 50%;
width: 146px;
height: 30px;
transform: translate(-50%,-50%);
justify-content: space-between;
}
.circle{
position: absolute;
width: 30px;
height: 30px;
border-radius: 30px;
background: black;
}
.circle2{
position: absolute;
width: 30px;
height: 30px;
border-radius: 30px;
background: black;
margin-left: 80%;
}animation의 다양한 속성들
animation-name :@keyframes 규칙을 이용하기 위해 @keyframes속성에서 지정한 애니메이션의 이름입니다.
아래의 예제에서 loading이라는 이름을 주었습니다. 단, 숫자나 특수문자로 시작하는 이름은 지정할 수 없습니다.
animation-duration : 한 번 재생하는데 애니메이션이 얼마에 걸쳐 일어날지 시간을 설정합니다. s = seconds(보통 초 단위로 많이 설정합니다). 0이나 음수로 설정하면 재생되지 않습니다. 아래의 예제에서 0.8초를 주었으며, 뒤에 infinite를 입력함으로써 무한반복되도록 설정하였습니다.
animation-delay : 언제 애니메이션이 시작될지 지정하는 속성입니다. 사용 가능한 단위는 초(s)와 밀리초(ms)가 있습니다.
animation-direction : 애니메이션 재생 방향 속성입니다.
from --> to (순방향) = normal
to --> from(역방향) = reverse
animation-iteration-count : 애니메이션 재생 횟수를 지정합니다. infinite 로 지정하여 무한히 반복할 수 있습니다.
animation-play-state : 애니메이션을 멈추거나 다시 시작하도록 재생 여부를 정의하는 속성입니다. running(기본값, 재생), paused(정지)
animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다. (키프레임 사이의 단계별 재생속도)
ease, ease-in-out
@keyframes 과 animation 속기형
예시)
@keyframes loading{
0%{
height: 0;
}
50%{
height: 60px;
}
100%{
height: 0;
}
}
애니메이션을 재생할 각 프레임의 스타일을 정의하는 것으로 from 속성이나 0% 속성에 설정한 스타일에서 출발해 to 속성이나 100% 속성에 설정한 스타일로 점차 바뀌면서 애니메이션이 재생됩니다.
키프레임은 애니메이션을 적용할 요소의 animation-name 을 정의하고 그 키프레임 코드 블럭에 재생할 프레임별 시간 비율을 작성합니다.
0% : 애니메이션의 시작 프레임
100% : 애니메이션의 마지막 프레임
from : 애니메이션의 시작 프레임으로 0%와 같습니다.
to : 애니메이션의 마지막 프레임으로 100%와 같습니다.
0%와 100% 사이에는 여러 개의 중간 값(%)을 설정해 프레임을 작성할 수 있습니다.
'html & css3' 카테고리의 다른 글
| @keyframes 과 animation 속기형/animation-direction (0) | 2020.11.23 |
|---|---|
| [html/css] 페이지 로딩 애니메이션 만들기 @keyframes/hue-rotate/infinite 속성 등 (0) | 2020.11.22 |
| [html/css] <dl>-<dt>-<dd> 태그 vs <th>-<tr>-<td> table 속성 (0) | 2020.11.20 |
| [html/css] dl dt dd 태그 테이블처럼 사용하기, 반응형에서 줄바꿈 적용하기 (0) | 2020.11.18 |
| [html/css] 페이지 밑에서 위로 올라가기/ 페이지 내 원하는 위치로 이동하기 (0) | 2020.11.15 |
