◾ Animation (애니메이션)
→ infinite 무한 반복
→ @keyframes 변수이름 {}
animation: Flips 5s ease-in-out infinite;
@keyframes Flips {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
@keyframes Flips {
0% {
transform: rotateY(0);
}
50% {
transform: rotateY(180deg) translateX(100px);
}
100% {
transform: rotateY(0);
}
}
'CSS 마스터하기 > CSS' 카테고리의 다른 글
[CSS] CSS 총정리 (0) | 2024.04.09 |
---|---|
[CSS] 미디어 쿼리 (반응형 모바일) 마스터하기 (0) | 2024.04.05 |
[CSS] Transform(변환) 마스터하기 (0) | 2024.04.05 |
[CSS] Transitions(전환) 마스터하기 (0) | 2024.04.05 |
[CSS] color(:root) 마스터하기 (0) | 2024.04.05 |