728x90
반응형
1. HTML코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="2_애니메이션예제1.css">
</head>
<body>
<div id="container">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
</div>
</body>
</html>
2. CSS코드
#container {
width: 500px;
margin: 20px auto;
}
.box {
width: 100px;
height: 100px;
float: left;
margin: 50px;
}
#box1 {
display: block;
position: relative;
background-color: cadetblue;
animation-name: move;
animation-iteration-count: infinite;
animation-direction: alternate;
/* animation-fill-mode: backwards; */
animation-duration: 3s;
}
#box2 {
background-color: darkcyan;
border: 1px solid transparent;
animation-name: rotate;
animation-duration: 3s;
}
#box3 {
background-color: darkslategrey;
animation: rotate3D 1.5s infinite, backchange 1.5s infinite;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
animation-delay: 1s;
}
@keyframes move {
from{
left: 0;
}
to{
left: 500px;
}
}
@keyframes shape {
from{
/* transparent : 투명 */
border: 1px solid transparent;
}
to{
border: 1px solid black;
border-radius: 50%;
}
}
@keyframes rotate {
from{
background-color: white;
transform: rotate(0deg);
}
to{
background-color: darkcyan;
transform: rotate(45deg);
}
}
@keyframes rotate3D {
from{
/* perspective : 원근감 */
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50%{
transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
}
to{
transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
}
}
@keyframes backchange {
from{
background-color: red;
}
50%{
background-color: aquamarine;
}
to{
background-color: blue;
}
}728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| flex 예제1 (0) | 2022.12.29 |
|---|---|
| animation 예제2 (0) | 2022.12.29 |
| transform연습 (0) | 2022.12.29 |
| transition 연습 (0) | 2022.12.29 |
| transform3 (0) | 2022.12.29 |