animation
play-stete
-
running
- 계속 재생되고 있는 상태
-
paused
- 애니메이션의 일시정지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/animation-part.2.css">
<title>CSS</title>
</head>
<body>
<div class="box1">
a
</div>
</body>
</html>div {
width:100px;
height: 100px;
border: 10px solid silver;
border-radius: 50%;
background-color: rgb(245,255,199);
}
.box1{
animation-name: rotate;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-play-state: paused;
}
.box1:hover{
animation-play-state: running;
}
@keyframes rotate{
from{
transform: rotate(0);
}
to{
transform: rotate(360deg);
}
}현재 상태는 box1의 마우스를 hover하면 애니메이션이 재생 그렇지 않다면 애니메이션이 정지된 상태
fill-mode
-
애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정
-
none
- 기존 스타일을 가지고 있고 keyframes에 있는 스타일을 적용하지 않는다.
-
forwards
- 애니메이션이 끝난 후 keyframes에 있는 스타일을 유지
-
backwards
- 애니메이션이 시작 하기 전에 keyframes에 있는 스타일을 미리 준비
div{
width: 100px;
height: 100px;
border:10px solid green;
}
.box1{
background-color: greenyellow;
animation: fill-mode 3s linear 1s ;
animation-fill-mode: backwards;
}
/* 1.기존스타일 div .box1 */
/* 2.keyframes 0% */
/* 3.keyframes ing */
/* 4.keyframes 100%*/
/* 5.기존 스타일로 돌아옴*/
/* 5가지 스타일로 변함 */
/* forwards 시작시에는 첫번재부터 시작한다
하지만 backforwards로 설정시에는 2번부터 시작
*/
@keyframes fill-mode{
0%{
background-color: red;
}
50%{
width: 200px;
}
100%{
background-color: black;
}
}animation-fill-mode에서 forwards 시작시에는 기존 스타일 div로 시작하지만
backforwards로 설정시에는 keyframes 0%로부터 시작함
함께 성장하는 것을 좋아하는 프론트엔드 개발자