반응형
<body>
<h1 class="wiggle">안녕하세요!</h1>
</body>
@keyframes wiggle {
0% {
transform: rotate(0deg);
color: red;
}
25% {
transform: rotate(10deg);
color: blue;
}
50% {
transform: rotate(0deg);
color: yellow;
}
75% {
transform: rotate(-10deg);
color: aqua;
}
100% {
transform: rotate(0deg);
color: oranges;
}
}
h1.wiggle {
display: inline-block;
animation: wiggle 2.5s infinite;
}
h1.wiggle:hover {
animation: none;
}
animation: wiggle 2.5s infinite;
한번 하는데 2.5초동안 (infnite) 무한으로 계속 진행
keyframe 으로 에니메이션을 만듦
에니메이션 속성에 우리가 만든 wiggle 이라는 이름을 사용 하여 조금 더 복잡한 에니메이션을 만들 수 있다!
반응형
'제로베이스_정리' 카테고리의 다른 글
| modal 창 만들기 (0) | 2024.10.29 |
|---|---|
| 색상과배경 (1) | 2024.04.25 |
| 레이아웃 (0) | 2024.04.24 |
| 박스모델 (Box Model) (0) | 2024.04.23 |
| 단위와 값 (0) | 2024.04.21 |
