<p>Ví dụ sau sẽ chạy hoạt ảnh theo hướng ngược lại:</p>
<div class="a"></div>
<p>Ví dụ sau hoạt ảnh chuyển tiếp, sau đó chạy ngược lại:</p>
<div class="b"></div>
<p>Ví dụ sau hoạt ảnh chạy ngược trước, sau đó chuyển tiếp:</p>
<div class="c"></div>div {
width: 20px;
height: 20px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 10;
}
div.a{
animation-direction: reverse;
}
div.b{
animation-direction: alternate;
}
div.c{
animation-direction: alternate-reverse;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:20px; top:0px;}
50% {background-color:blue; left:20px; top:20px;}
75% {background-color:green; left:0px; top:20px;}
100% {background-color:red; left:0px; top:0px;}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.