Stack/CSS
[CSS] CSS 애니메이션
7ingout
2022. 4. 20. 16:42
@keyframes scaleWidth {
from {
width: 100px;
}
to {
width: 200px;
}
}
div {
animagion-name: scaleWidth
animation-duration: 1s;
}
ani.html
<!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>
<style>
@keyframes scaleWidth {
0%{
top: 100px;
left: 0;
}
25% {
top: 100px;
left:500px;
}
50% {
left: 500px;
top: 500px;
}
75% {
left: 0;
top: 500px
}
100%{
left: 0;
top: 100px;
}
}
div {
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 0;
background: tomato;
animation-name: scaleWidth;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-delay: 1s; /* 1초 뒤에 시작 */
animation-fill-mode: backwards; /* forwards: 끝나는 장면으로 감, backwards: 처음 위치로 감(default) */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
ani_ex.html
<!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>
<style>
@keyframes scaleWidth {
0%{
top: 0;
left: 0;
}
12.5% {
top: 0;
left: 0;
width: 400px;
height: 100px;
}
25% {
top: 0;
left: 300px;
width: 100px;
height: 100px;
background-color: skyblue;
}
37.5% {
top: 0;
left: 300px;
height: 400px;
}
50% {
left: 300px;
top: 300px;
width: 100px;
height: 100px;
background-color: skyblue;
}
62.5% {
left: 0;
top: 300px;
width: 400px;
height: 100px;
}
75% {
left: 0;
top: 300px;
width: 100px;
height: 100px;
}
87.5% {
left: 0;
top: 0;
width: 100px;
height: 400px;
background-color: greenyellow;
}
100%{
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: tomato;
}
}
div {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background: tomato;
animation-name: scaleWidth;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-fill-mode: backwards; /* forwards: 끝나는 장면으로 감, backwards: 처음 위치로 감(default) */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
ani_ex_teacher.html
<!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>
<style>
@keyframes Move {
0% {
left: 0;
top: 0;
width: 100px;
height: 100px;
}
12.5% {
width: 300px;
left: 0;
top: 0;
height: 100px;
background: lightblue;
}
25% {
width: 100px;
left: 200px;
background: lightblue;
height: 100px;
}
37.5% {
height: 300px;
left: 200px;
top: 0;
background: lightblue;
}
50% {
height: 100px;
left: 200px;
top: 200px;
background: lightblue;
width: 100px;
}
62.5% {
background: lightgreen;
left: 0;
top: 200px;
width: 300px;
height: 100px;
}
75% {
background: lightgreen;
left: 0;
top: 200px;
width: 100px;
height: 100px;
}
87.5% {
background: lightgreen;
left: 0;
top: 0;
width: 100px;
height: 300px;
}
100% {
left:0;
top: 0;
width: 100px;
height: 100px;
}
}
div {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
background: tomato;
/* animation-name: Move;
animation-duration: 5s;
animation-iteration-count: infinite; */
animation: Move 5s 2s infinite; /* 2초 뒤에 시작하는 속기법 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
ani_ex2.html
<!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>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
@keyframes scaleX {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes scaleY {
0% {
height: 0;
}
100% {
height: 100%;
}
}
@keyframes centerl {
0% {
height: 0;
opacity: 0;
}
100% {
height: 40%;
opacity: 1;
}
}
@keyframes opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
body {
width: 100%;
height: 100vh;
/* display: flex;
justify-content: center;
align-items: center; 요소를 중앙에 배치시키는 첫번째 방법 */
position: relative;
}
#wrap {
width: 420px;
height: 280px;
position: absolute;
/* top: 50%;
left: 50%;
transform: translate(-50%, -50%); 두번째 방법 */
/* top: 50%;
left: 50%;
margin-left: -210px;
margin-top: -140px; 옛날에 쓰던 방법 */
top: calc(50% - 75px);
left: calc(50% - 200px);
position: relative;
}
#wrap div {
background: #000;
position: absolute;
}
#leftline { width: 10px; height: 100%; bottom: 0; left: 0; animation: scaleY 1s;}
#rightline { width: 10px; height: 100%; top: 0; right: 0; animation: scaleY 1s;}
#topline { width: 100%; height: 10px; top: 0; left: 0; animation: scaleX 1s; }
#bottomline { width: 100%; height: 10px; bottom: 0; right: 0; animation: scaleX 1s; }
#centerline {
width: 3px; height: 40%; left: 50%; top: 50%; transform: translate(-50%, -50%);
animation: centerl 1s 1s; opacity: 0; animation-fill-mode: forwards; /* forwards 끝났을 때로 유지 */
}
h2 {
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%);
opacity: 0;
animation: opacity 0.5s 2s forwards;
}
p {
position: absolute;
left: 50%;
bottom: 16%;
transform: translate(-50%);
opacity: 0;
animation: opacity 0.5s 2s forwards;
}
</style>
</head>
<body>
<div id="wrap">
<div id="leftline"></div>
<div id="rightline"></div>
<div id="topline"></div>
<div id="bottomline"></div>
<div id="centerline"></div>
<h2>Green Academy</h2>
<p>green web</p>
</div>
</body>
</html>