animation-trigger-fill-mode-both.tentative.html (1068B)
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-both-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 position: relative; 16 } 17 @keyframes slide-in { 18 from { 19 transform: translateX(-50px); 20 } 21 } 22 .target { 23 height: 100px; 24 width: 100%; 25 background-color: blue; 26 animation: slide-in 0.3s both; 27 timeline-trigger: --trigger view() contain 0% contain 100%; 28 animation-trigger: --trigger play-forwards play-backwards; 29 position: absolute; 30 } 31 .space { 32 height: 250px; 33 width: 50%; 34 } 35 36 </style> 37 <div id="scroller" class="scroller"> 38 <div class="space"></div> 39 <div id="target" class="target"></div> 40 <div class="space"></div> 41 </div> 42 </body> 43 </html>