GeezerVisonThe World Wide Web, restored to 800 pixels of glory. | ||||||||||||||
| Home|About|Gaming cabinet|Archives|How it works|Starter sites | ||||||||||||||
GeezerVison is showing developer.mozilla.org — animation-range-end CSS property - CSS | MDN
|
| Initial value | normal |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Percentages | Relative to the specified named timeline range if specified, otherwise relative to the entire timeline |
| Computed value | A list where each item may be 'normal', a length percentage, or a timeline range name and a length percentage |
| Animation type | Not animatable |
animation-range-end =
[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
<length-percentage> =
<length> |
<percentage>
In this example, the animation-range-end is applied to an element animated via a view progress timeline. This makes the animation reach its last keyframe well before the element reaches the end of its containing viewport.
<div class="content">
<h1>Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
vivamus at augue.
</p>
<p>
Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
arcu vitae elementum curabitur vitae nunc sed velit.
</p>
In the middle of a long block of text, we've included an element that we'll animate. We've added a lot of text to ensure that the content overflows its container; the extra text is hidden here for brevity.
<div class="animatedElement"></div>
<p>
Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non tellus
orci ac auctor augue mauris. Risus quis varius quam quisque id diam vel quam
elementum. Nibh praesent tristique magna sit amet purus gravida quis. Duis
ultricies lacus sed turpis tincidunt id aliquet. In egestas erat imperdiet sed
euismod nisi. Eget egestas purus viverra accumsan in nisl nisi scelerisque.
Netus et malesuada fames ac.
</p>
<p>
We've also included a checkbox that will toggle the animation-fill-mode property, so you can see how this property affects animations with shortened timelines.
<label>
<input type="checkbox" /> Add <code>animation-fill-mode: forwards;</code>
</label>
</p>
</div>
We've defined a view progress timeline by setting a view() function as the value of the animation-timeline property. This is declared after the animation shorthand to avoid resetting the longhand property value.
We've also set animation-range-end to make the animation end earlier than expected.
.animatedElement {
background-color: deeppink;
animation: appear 1ms linear;
animation-timeline: view();
animation-range-end: exit 25%;
}
@keyframes appear {
from {
background-color: rebeccapurple;
opacity: 0;
transform: scaleX(0);
}
to {
background-color: darkturquoise;
opacity: 0.75;
transform: scaleX(0.75);
}
}
When the checkbox is checked, the animation-fill-mode property gets applied to the animated element:
:has(:checked) ~ .animatedElement {
animation-fill-mode: forwards;
}
The other styles applied in this example have been hidden for brevity.
.animatedElement {
width: 300px;
height: 200px;
margin: 0 auto;
background-color: deeppink;
}
:has(:checked) .animatedElement {
animation-fill-mode: both;
}
.content {
width: 75%;
max-width: 800px;
margin: 0 auto;
}
p,
h1 {
font-family: "Helvetica", "Arial", sans-serif;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1.5rem;
line-height: 1.5;
}
@supports not (animation-range-end: normal) {
body::before {
content: "Your browser does not support the 'animation-range-end' property.";
color: black;
background-color: wheat;
display: block;
text-align: center;
padding: 1rem 0;
}
}
Scroll to see the element animate. Then toggle the checkbox at the end of the block of text and scroll again. Notice how the element finishes animating when it is 75% of the way through the viewport, and how it returns to its default state at that point when the animation-fill-mode property is not applied.
| Specification |
|---|
| Scroll-driven Animations # animation-range-end |