CSS를 사용하면 요소 속성의 전환을 애니메이션할 수 있습니다. 애니메이션 속성을 사용하여 원하는 스타일을 정의합니다. animation 키워드를 사용하여 animation-name, animation-duration, animation-iteration-count 등과 같은 속성을 결합할 수 있습니다.
구문
애니메이션 속성의 구문은 다음과 같습니다 -
object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
값
다음은 값입니다 -
| 값 | 설명 |
|---|---|
| 애니메이션 이름 | 선택기를 바인딩할 키프레임 이름을 지정합니다. |
| 애니메이션 지속 시간 | 애니메이션의 완료 시간(초 또는 밀리초)을 지정합니다. |
| 애니메이션 타이밍 기능 | 애니메이션 속도 곡선을 지정합니다. |
| 애니메이션 지연 | 애니메이션이 시작되기 전에 약간의 지연을 지정하려면 |
| 애니메이션 반복 횟수 | 애니메이션을 재생해야 하는 시간을 지정하려면 |
| 애니메이션 방향 | 애니메이션이 대체 또는 역 주기로 재생되어야 하는지 여부를 나타냅니다. |
| 애니메이션 채우기 모드 | 애니메이션이 실행 중인 시간 외에 적용되는 값을 지정하려면 |
| 애니메이션 재생 상태 | 애니메이션이 현재 일시 중지 또는 재생 중인지 지정합니다. |
| 초기 | 이 속성을 초기 값으로 설정합니다. |
| 상속 | 상위 속성 값을 상속합니다. |
예시
애니메이션 속성의 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 5px;
height: 15px;
background-color: limegreen;
animation: demo 4s infinite;
}
@keyframes demo {
from {width: 5px; background-color: limegreen;}
to {width: 400px; background-color: darkgreen;}
}
@keyframes demo1 {
from {height: 5px; background-color: limegreen;}
to {height: 400px; background-color: darkgreen;}
}
</style>
<script>
function changeAnimation() {
document.getElementById("DIV1").style.animation = "demo1 4s 2";
}
</script>
</head>
<body>
<button onclick="changeAnimation()">CHANGE ANIMATION</button>
<p>Change the below animation by clicking the above button</p>
<div id="DIV1"></div>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
CHANGE ANIMATION 버튼을 클릭하면 애니메이션이 변경됩니다 -
