animation fill mode 연습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01_animation fill mode</title>
<style>
*{margin: 0;
padding: 0;}
div{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: yellow;
animation: ani 3s 3 2s;
position: relative;
}
@keyframes ani{
0%{
left:200px;
background-color: pink;
}
100%{
left: 600px;
background-color: lightblue;
}
}
.ani2{
animation-fill-mode: forwards;
}
.ani3{
animation-fill-mode: backwards;
}
.ani4{
animation-fill-mode: both;
}
</style>
</head>
<body>
<div class="ani1">none</div>
<div class="ani2">forwards</div>
<div class="ani3">both</div>
<div class="ani4">both</div>
<h1>animation-fill-mode의 속성값이 없을 때는 none <br>
animation-fill-mode:forwards 속성값일 때는 100%스타일에서 끝나서 멈춤 <br>
animation-fill-mode:backwards 속성값일 때는 0%속성값을 먼저 가지고 있다가 animation-delay
가 되고 play <br>
animation-fill-mode:both 속성값일 때는 0%속성값을 먼저 가지고 있다가 animation-delay가 되고
play가 된 후 100%스타일에서 끝나서 멈춤
</h1>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_animation의 활용</title>
<style>
*{margin: 0;
padding: 0;}
.bo{
border:1px solid purple;
}
#wrapper{
width: 200%;
height: 950px;
border: 1px solid red;
}
#wrapper>section{
width: 50%;
height: 100%;
border: 1px solid blue;
float: left;
box-sizing: border-box;
}
#wrapper>section:nth-child(1) .board{
width: 717px;
height: 419px;
background: url(img/home/board.png);
position: absolute;
bottom: 0;
left: 50%;
margin-left: -358.5px;
}
#wrapper>section:nth-child(1) .plane{
width: 664px;
height: 228px;
background: url(img/index_air.png);
animation: move 8s 1s ease-in infinite;
position: absolute;
top: 0;
left: -1000px;
transform: rotateY(0deg);
}
@keyframes move{
0%{
transform: rotateY(0deg);
left: 100%;
}
50%{
left: -100px;
transform: rotateY(0deg);
opacity: 1;
}
70%{
left: -100px;
transform: rotateY(180deg);
opactiy: 0;
}
70.1%{
opacity: 1;
}
99.999%{
left: 100%;
transform: rotateY(180deg);
}
100%{
left: 100%;
transform: rotateY(0deg);
}
}
.sprites{
width: 171px;
height: 169px;
background: url(img/home/bird.png);
animation: wing 2s steps(12) 1;
border: 3px solid orange;
background-position: -1881px;
}
@keyframes wing{
from{background-position: 0px;}
to{background-position: -2052px;}
}
.bird_box{
width: 171px;
height: 169px;
animaton: fly 2s steps(12) 1 forwards;
position: aboslute;
}
@keyframes fly{
0%{
bottom:700px;
right:0px;
}
100%{
bottom: 400px;
right:500px;
}
}
</style>
</head>
<body>
<div id="wrapper">
<section>
<div class="board bo"></div>
<div calss="plane bo"></div>
<div class="bird_box bo">
<div class="sprites"></div>
</div>
</section>
</div>
</body>
</html>
반응형
'IT' 카테고리의 다른 글
| IT 5분 잡학사전 2주 챌린지 2일차. (0) | 2023.08.27 |
|---|---|
| IT 5분 잡학사전 2주 챌린지 1일차. (0) | 2023.08.25 |
| 2D transform / animation 속성 활용 (0) | 2022.07.07 |
| 웹폰트(TTF, OTF, WOFF, SVG, EOT) / transition (0) | 2022.07.06 |
| gnb 연습 / navigation bar (0) | 2022.07.05 |