노력이 좋아서
<step24>'css_animation'
zoaseo
2022. 4. 21. 10:14
1) animation_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=, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes action {
0% {
top: 0;
left: 0;
}
12.5% {
left: 0;
top: 0;
width: 400px;
height: 100px;
background: lightblue;
}
25% {
top: 0;
left: 300px;
width: 100px;
height: 100px;
background: lightblue;
}
37.5% {
top: 0;
left: 300px;
width: 100px;
height: 400px;
background: greenyellow;
}
50% {
top: 300px;
left: 300px;
width: 100px;
height: 100px;
background: greenyellow;
}
62.5% {
left: 0;
top: 300px;
width: 400px;
height: 100px;
background: pink;
}
74.5% {
top: 300px;
left: 0;
width: 100px;
height: 100px;
background: pink;
}
87% {
left: 0;
top: 0;
width: 100px;
height: 400px;
background: red;
}
100% {
left: 0;
top: 0;
width: 100px;
background: red;
}
}
div {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 0;
left: 0;
animation-name: action;
animation-duration: 10s;
animation-delay: 0.5s;
animation-iteration-count: 5;
}
</style>
</head>
<body>
<div></div>
</body>
</html>2) animation_ex_teach.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;
height: 100px;
left: 200px;
top: 0;
background: lightblue;
}
37.5% {
height: 300px;
width: 100px;
left: 200px;
top: 0;
background: lightblue;
}
50% {
height: 100px;
width: 100px;
left: 200px;
top: 200px;
background: lightblue;
}
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% {
background: tomato;
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: 5; */
animation: Move 5s 2s 5; /* name duration delay iteration-count */
}
</style>
</head>
<body>
<div></div>
</body>
</html>3) animation_ex_teach.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;}
body {
width: 100%;
height: 100vh;
position: relative;
}
@keyframes scalex {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes scaley {
from {
height: 0;
}
to {
height: 100%;
}
}
@keyframes center {
from {
height: 0;
opacity: 0;
}
to {
height: 40%;
opacity: 1;
}
}
@keyframes opacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#wrap {
position: absolute;
top: calc(50% - 140px);
/* top: calc(50% - height/2); */
left: calc(50% - 210px);
/* left: calc(50% - width/2); */
width: 420px;
height: 280px;
/* 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%);
opacity: 0;
animation: center 1s 1s;
animation-fill-mode: forwards; /* 끝났을 때로 유지 */
}
h2 {
position: absolute;
left: 50%;
top: 10%;
transform: translateX(-50%);
opacity: 0;
animation: opacity 0.5s 1.5s forwards;
}
p {
position: absolute;
left: 50%;
bottom: 15%;
transform: translateX(-50%);
opacity: 0;
animation: opacity 0.5s 1.5s 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>