Animation-timeline scroll() – carré en rotation
HTML
index.html <div class="box"></div>
CSS
style.css @layer demo {
.box {
position: absolute;
top: 50%;
animation: rotateAnimation 1s alternate;
animation-timeline: scroll(block nearest); /* default values */
transform-origin: center center;
background: blue;
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
@layer demoStyles {
:root {
--border-color: green;
}
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
color: white;
height: 2000px;
}
.box {
width: 200px;
height: 200px;
border-radius: 15px;
}
}