animation CSS
- 애니메이션을 사용하면 요소를 한 스타일에서 다른 스타일로 점진적으로 변경할 수 있다.
- css 애니메이션을 사용하려면 먼저 애니메이션에 대한 몇가지 키프레임 keyframes을 지정해야 한다.
- 키프레임(keyframe)은 특정 시간에 요소의 스타일을 유지한다.
실습
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: animationName 5s linear 2s infinite alternate;
}
@keyframes animationName {
0% {
background: lightblue;
left: 0px;
top: 0px;
}
25% {
background: lightcoral;
left: 150px;
top: 0px;
}
50% {
background-color: lightcyan;
left: 150px;
top: 150px;
}
75%{
background-color: lightgray;
left: 0px;
top: 150px;
}
100%{
background-color:lightgreen;
left: 0px;
top: 0px;
}
}
</style>
<body>
<div></div>
</body>
'개발일지 > HTML&CSS' 카테고리의 다른 글
| [16] Flexbox (flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, align-self, flex item order, flex-grow, flex-shrink, flex-basis, flex) (0) | 2024.11.23 |
|---|---|
| [15] background-clip (1) | 2024.11.22 |
| [13] Transform (0) | 2024.11.22 |
| [12] Image, Input 요소 (0) | 2024.11.20 |
| [11] Text 스타일링하기 (1) | 2024.11.20 |
