728x90
반응형
SMALL
: 요소에 적용되는 css 스타일을 다른 css 스타일로 부드럽게 전환 .
keyframe
- 에니메이션을 사용하기 위해 지정해야 함
- 특정시간에 요소의 스타일를 유지함
에니메이션 속성
에니메이션 만들기 실습
<style>
body {
margin: 0;
padding: 0;
}
.circle {
width: 20px;
height: 20px;
background-color: blue;
border-radius: 50%;
position: absolute;
animation: move-the-circle 1.5s infinite;
}
.circle:nth-child(2) {
left: 30px;
animation-delay: 0.1s;
}
.circle:nth-child(3) {
left: 60px;
animation-delay: 0.2s;
}
.circle:nth-child(4) {
left: 90px;
animation-delay: 0.3s;
}
.circle:nth-child(5) {
left: 120px;
animation-delay: 0.4s;
}
.circle:nth-child(6) {
left: 150px;
animation-delay: 0.5s;
}
.circle:nth-child(7) {
left: 180px;
animation-delay: 0.6s;
}
.circle:nth-child(8) {
left: 210px;
animation-delay: 0.7s;
}
@keyframes move-the-circle {
0% {
transform: translate(0, 0) scale(1);
background-color: blue;
}
50% {
transform: translate(0, 50px) scale(0.5);
background-color: red;
}
100% {
transform: translate(0, 0) scale(1);
background-color: blue;
}
}
</style>
</head>
<body>
<div class="animation-wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</body>
</html>
ex2)
728x90
반응형
LIST
'웹 > css' 카테고리의 다른 글
| Flexbox (0) | 2023.10.11 |
|---|---|
| 반응형 웹사이트 (@media, calc) (0) | 2023.10.11 |
| Transform/ Transition (0) | 2023.10.11 |
| 고급 선택자(연결선택자, 속성선택자,가상선택자 ) (0) | 2023.08.02 |
| 배경 (0) | 2023.08.02 |
