Web/인프런
@keyframe 도형 로딩 애니메이션
100seo
2022. 1. 7. 21:34
<애니메이션 미리보기>
See the Pen Untitled by seohyeon baek (@100seo) on CodePen.
<코드블럭>
기본 html 구문 불러오기
<!DOCTYPE html>
<html lang="ko">
<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>keyframe</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="loading">
<span></span>
<span></span>
</div>
</body>
</html>css 작업
/*로딩화면이므로 정중앙 배치*/
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.loading{
/*border: 1px solid red; */
width: 30px;
height: 30px;
position: relative;
}
.loading span{
position: absolute;
width: 10px;
height: 10px;
background-color: red;
/*loading이라는 이름을 가진 애니메이션을 n초만큼 무한반복 재생시킴*/
animation: loading 1.5s infinite;
}
.loading span:nth-child(1){
background-color: red;
}
.loading span:nth-child(2){
/*2번째 span태그가 0.7초만큼 나중에 출발*/
animation-delay: 0.7s;
}
/*모서리를 돌고 다시 처음으로 돌아와야 하므로 25%씩 총 5개의 프레임 생성*/
@keyframes loading{
0%{
top: 0;
left: 0;
}
25%{
top: 0;
/*컬크태그. 마이너스 양옆에 무조건 띄어쓰기
border기준 안쪽에서 돌게끔 넣어줘야하기 때문에 span자체 크기만큼 빼줌*/
left: calc(100% - 10px);
background-color: blue;
}
50%{
top: calc(100% - 10px);
left: calc(100% - 10px);
background-color: orange;
}
75%{
top: calc(100% - 10px);
left: 0;
background-color: green;
}
100%{
/*0%,100% 동일하게 작성*/
top: 0;
left: 0;
}
}