반응형
애니메이션(animation)
: 속성을 변화시켜 움직이게 하는 기법이다.
- 트랜지션과 비교했을 때, 시작과 끝의 스타일을 부드럽게 이어주는 것은 같지만
애니메이션은 @keyframes를 이용하여 중간의 스타일을 지정할 수 있다.
@keyframes
: 애니메이션의 시작과 끝의 스타일을 지정하고 keyframes 이름도 지정한다.
- 시작과 끝의 지점만 설정할 경우에는 from{} to{}로 설정한다.
<head>
<style>
.animation1:hover{
width:250px;
animation-name: ani1; /*애니메이션 이름 지정*/
animation-duration: 4s; /*애니메이션 지속시간 : 4초*/
animation-direction: alternate; /*애니메이션 방향 alternate: 역방향*/
animation-iteration-count: infinite; /*애니메이션 반복횟수 : 무한반복*/
}
@keyframes ani1{
from{
background-color: red;
border: 1px solid blue;
}
to{
background-color: lightgreen;
border: 3px solid aqua;
border-radius: 30%;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="animation1">애니메이션1</div>
</body>
- 중간중간 다르게 적용할 스타일이 있으면 %로 구분하여 설정한다.
<head>
<style>
.animation2:hover{
animation: ani2 4s infinite alternate;
}
@keyframes ani2{
0%{ /*시작할 때(0%)*/
background-color: red;
border: 1px solid black;
}
40%{ /*40% 진행됐을 때*/
background-color: orange;
border: 2px solid grey;
translate(60px, 70px);
}
100%{ /*끝날 때(100%)*/
background-color: yellow;
border: 3px solid blue;
transform: rotate(30deg);
}
}
</style>
</head>
<body>
<div class="animation2">애니메이션2</div>
</body>반응형