CSS로 자바스크립트없이 간단한 애니메이션 구현.
1. animation-delay = 요소가 로드되고나서 딜레이 되는 시간
2. animation-direction = 애니메이션이 종료되고 정방향으로 시작할건지 역방향으로 시작할건지
3. animation-name = @keyframe을 사용하여 애니메이션의 중간상태를 지정
4. animation-iteration-count = 애니메이션이 몇번 반복될지 설정. infinite를 지정하여 무한반복
5. animation-play-state : 애니메이션을 멈추거나 다시 시작
6. animation-timing-function : 중간 상태전환을 어떤 시간간격으로 진행할지 지정
7. animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정.
p {
animation-duration: 3s;
animation-name: slidein; /* keyframe에 지정한 함수를 가져옴 */
animation-iteration-count: infinite; /* 무한반복 */
animation-direction: alternate; /* 앞뒤로 움직이기 */
animation-play-state: paused;
animation-timing-function: 1s;
animation-fill-mode: both;
animation-delay: 1s;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%
}
to {
margin-left: 0%;
width: 100%;
}
}
애니메이션에 이벤트 리스너 추가
<body onload="setup()">
<h1 id="watchme">Watch me move</h1>
<p>This example shows how to use CSS animations to make <code>h1</code> elements
move across the page.</p>
<p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
<ul id="output">
</ul>
</body>function setup() { /* 애니메이션 이벤트 리스너를 추가 */
var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);
var e = document.getElementById("watchme");
e.className = "slidein";
}
function listener(e) { /* 이벤트 받기 */
var l = document.createElement("li");
switch(e.type) {
case "animationstart":
l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
break;
case "animationend":
l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
break;
case "animationiteration":
l.innerHTML = "New loop started at time " + e.elapsedTime;
break;
}
document.getElementById("output").appendChild(l);
}'웹표준 > Styling' 카테고리의 다른 글
| 4. text-overflow / 웹폰트 / text-decoration (0) | 2020.04.03 |
|---|---|
| 2. border-image / border-radius (0) | 2020.04.02 |
| 1. box-shadow / background / filter (0) | 2020.04.02 |
