| <html> |
| <style> |
| div { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background: blue; |
| transform: translateZ(0); |
| animation-direction: alternate; |
| animation-duration: 2s; |
| animation-timing-function: linear; |
| animation-iteration-count: 1; |
| animation-delay: 1s; |
| } |
| |
| .fill-both { |
| animation-fill-mode: both; |
| } |
| |
| .fill-none { |
| animation-fill-mode: none; |
| } |
| |
| .fill-forwards { |
| animation-fill-mode: forwards; |
| } |
| |
| .fill-backwards { |
| animation-fill-mode: backwards; |
| } |
| |
| .anim-left { |
| animation-name: anim-left; |
| z-index: 100; |
| } |
| |
| .anim-transform { |
| animation-name: anim-transform; |
| z-index: 200; |
| } |
| |
| @keyframes anim-left { |
| 0% { |
| left: 250px; |
| } |
| 100% { |
| left: 500px; |
| } |
| } |
| |
| @keyframes anim-transform { |
| 0% { |
| transform: translateX(250px); |
| } |
| 100% { |
| transform: translateX(500px); |
| } |
| } |
| </style> |
| <body> |
| <p> |
| Each section below has two boxes, the top runs on the main thread, the bottom |
| on the compositor. |
| </p> |
| <hr> |
| |
| These boxes should start in the middle and finish at the end (both fill) |
| <br> |
| <div class="anim-left fill-both">MT</div> |
| <div class="anim-transform fill-both">CT</div> |
| |
| These boxes should start in the middle and finish at the start (backwards fill) |
| <br> |
| <div class="anim-left fill-backwards">MT</div> |
| <div class="anim-transform fill-backwards">CT</div> |
| |
| These boxes appear on the left and jump to the middle and finish at the end (forwards fill) |
| <br> |
| <div class="anim-left fill-forwards">MT</div> |
| <div class="anim-transform fill-forwards">CT</div> |
| |
| These boxes appear on the left and jump to the middle and finish at the start (none fill) |
| <br> |
| <div class="anim-left fill-none">MT</div> |
| <div class="anim-transform fill-none">CT</div> |
| |
| These boxes appear on the left and jump to the middle and finish at the start (auto fill) |
| <br> |
| <div id="leftAuto">MT</div> |
| <div id="transformAuto">CT</div> |
| |
| <script> |
| var transformKeyframes = [ |
| {transform: 'translateX(250px)'}, |
| {transform: 'translateX(500px)'} |
| ]; |
| var leftKeyframes = [ |
| {left: '250px'}, |
| {left: '500px'} |
| ]; |
| leftAuto.animate(leftKeyframes, { |
| duration: 2000, |
| iterations: 1, |
| fill: 'auto', |
| delay: 1000 |
| }); |
| transformAuto.animate(transformKeyframes, { |
| duration: 2000, |
| iterations: 1, |
| fill: 'auto', |
| delay: 1000 |
| }); |
| </script> |
| </body> |
| </html> |
