animation-trigger-fill-mode-none.tentative.html (1010B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="help" href="https://drafts.csswg.org/web-animations-2#animation-trigger"> 5 <link rel="match" href="animation-trigger-fill-mode-none-ref.html"> 6 </head> 7 <body> 8 <style> 9 .scroller { 10 overflow-y: scroll; 11 border: solid 1px; 12 place-self: center; 13 height: 300px; 14 width: 200px; 15 } 16 @keyframes slide-in { 17 from { 18 transform: translateX(-50px); 19 } 20 } 21 .target { 22 height: 100px; 23 width: 100%; 24 background-color: blue; 25 animation: slide-in 3s none; 26 timeline-trigger: --trigger view() contain 0% contain 100%; 27 animation-trigger: --trigger play-forwards play-backwards; 28 } 29 .space { 30 height: 250px; 31 width: 50%; 32 } 33 34 </style> 35 <div id="scroller" class="scroller"> 36 <div class="space"></div> 37 <div id="target" class="target"></div> 38 <div class="space"></div> 39 </div> 40 </body> 41 </html>