[ CSS animation ]
: transition을 통해 몇초동안 변하게 하는 것 외에도 지속적으로 변화가 계속 반복해서 발생되도록 할 때 animation을 사용한다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>애니메이션 스터디</title>
<style media="screen">
.box{
width:200px;
height:200px;
background-color:yellow;
color:white;
}
.box:hover{
background-color:red;
color:blue;
animation: 3s multiStepAnimation infinite; /*생성한 keyframes를 애니메이션으로 등록한다.*/
}
@keyframes animationName {
from{ /*상태가 2개일 때는 from, to로만 구성해도 된다.*/
transform:none;
/* transform:rotate(0deg);
transform:scale(1); */
}
to{
transform:scale(2);
transform:rotate(360deg);
}
}
@keyframes multiStepAnimation{
0%{
transform:rotate(0deg);
}
25%{
transform:rotate(90deg);
}
50%{
transform:rotate(180deg);
}
75%{
transform:rotate(250deg);
}
97%{
transform:rotate(360deg);
}
100%{
transform:rotate(0deg);
}
}
</style>
</head>
<body>
<div class="box">애니메이션</div>
</body>
</html>
'스터디 > CSS관련 Tip' 카테고리의 다른 글
| 3. 자식 요소들의 배치를 편리하게 해줄 flex (0) | 2018.09.23 |
|---|---|
| 2. CSS3의 transform을 통한 요소 변형, 위치 제어 (0) | 2018.09.23 |
| 1. CSS 관련 Tip(반응형 제작 포함) 정리 (0) | 2018.09.23 |