` name is then linked to the element to animate by specifying it as the value of that element's `animation-timeline` property.
+
+With named view progress timelines, the element to animate does not have to be the same as the subject. In other words, the element controlling the timeline doesn't have to be the same as the element being animated. This means you can animate one element based on another element's movement within its scrollable container.
+
+Here we use the {{cssxref("view-timeline-name")}} property to name an element, identifying the element itself as the source of a view progress timeline. We then set that name as the value of the `animation-timeline` property.
+
+```css live-sample___named_view
+.item {
+ animation: action 1ms linear;
+
+ view-timeline-name: --a-name;
+ animation-timeline: --a-name;
+}
+```
+
+We applied the animation **before** the animation timeline, as the `animation` resets the `animation-timeline` to `auto`.
+
+The animation is slightly different from the previous examples in that the spinning effect starts at `20%` and ends at `80%` of the way through the animation; this means the element will not be actively spinning when it first comes into view and will stop spinning before it is completely out of view.
+
+```css live-sample___named_view live-sample___anon_view
+@keyframes action {
+ 0%,
+ 20% {
+ rotate: 45deg;
+ }
+ 80%,
+ 100% {
+ rotate: 720deg;
+ }
+}
+```
+
+```css hidden live-sample___named_view live-sample___anon_view live-sample___anon_view_args
+.scroller {
+ width: 400px;
+ height: 200px;
+ line-height: 2;
+ overflow: scroll;
+ border: 1px solid;
+ background-color: palegoldenrod;
+}
+.item {
+ --size: 50px;
+ height: var(--size);
+ width: var(--size);
+ background-color: magenta;
+ border: 1px solid;
+ left: calc(50% - (var(--size) / 2));
+ top: calc(50% - (var(--size) / 2));
+}
+```
+
+```html hidden live-sample___named_view live-sample___anon_view live-sample___anon_view_args
+
+ Scroll down to view the animation
+
+
+
+
+
+
+
+
+ Scroll up to view the animation
+
+```
+
+{{EmbedLiveSample("named_view", "100%", "250")}}
+
+Scroll the element into view. Note that the element animates through the `@keyframes` animation as it moves through the visible area of its ancestor scroller.
+
+### Anonymous view progress timeline: the `view()` function
+
+Alternatively, a {{cssxref("animation-timeline/view", "view()")}} function can be set as the value of the `animation-timeline` property to specify that an element's animation timeline is an _anonymous view progress timeline_. This causes the element to be animated based on its position inside its nearest parent scroller.
+
+The `view()` function creates a view timeline. You attach the timeline to the element you want to animate using the `animation-timeline` property. The function creates a view timeline for each element matched by the selector.
+
+In this example, we again define the `animation` before the `animation-timeline`, so the timeline is not reset. We then include an argument-less `view()` function. We don't specify a scroller, as, by definition, the subject's visibility is tracked by its nearest ancestor scroller.
+
+```css live-sample___anon_view
+.item {
+ animation: action 1ms linear;
+ animation-timeline: view();
+}
+```
+
+{{EmbedLiveSample("anon_view", "100%", "250")}}
+
+### Parameters of the `view()` function
+
+The `view()` function takes up to three optional values as arguments:
+
+- Zero or one `` parameters. If set, this specifies the scroll axis along which the animation progresses.
+- Either the keyword `auto` or zero, one, or two {{cssxref("length-percentage")}} inset values. If set, these values specify offsets for the scrollport start and/or end.
+
+Declaring `view()` is equivalent to `view(block auto)`, which defines `block` as the axis of the parent element that supplies the timeline and the {{cssxref("scroll-padding")}}, which generally defaults to `0`, as the insets within the visible area at which the animation starts and ends.
+
+The function sets the values of the {{cssxref("view-timeline-axis")}} and {{cssxref("view-timeline-inset")}} properties.
+
+The {{cssxref("view-timeline-inset")}} arguments specify insets (if positive) or outsets (if negative) that adjust the start and end of the scrollport. They are used to determine the scroll positions at which the element is considered "in view", which determines the length of the animation timeline. In other words, instead of starting at the start edge and ending at the end edge of the scrollport, the animation occurs at the start and end of the inset-adjusted view.
+
+Unlike the scroll timeline's `scroll()` function, there is no `` argument in the `view()` function, as the view timeline always tracks the subject within its nearest ancestor scroll container.
+
+In this example, as we are using inset values, we can use the `from` and `to` keyframe selectors.
+
+```css live-sample___anon_view_args
+@keyframes action {
+ from {
+ rotate: 45deg;
+ }
+ to {
+ rotate: 720deg;
+ }
+}
+
+.item {
+ animation: action 1ms linear;
+ animation-timeline: view(block 20% 20%);
+}
+```
+
+{{EmbedLiveSample("anon_view_args", "100%", "250")}}
+
+## Accessibility concerns
+
+As with all animations and transitions, always take any user's [`prefers-reduced-motion`](/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) preference into account.
+
+### Removing an animation's timeline
+
+Setting `animation-timeline: none` disassociates the element from all animation timelines, including the default time-based document timeline, meaning the element will not animate. While some animations may be necessary, you can remove animations based on the user's `prefers-reduced-motion` setting with:
+
+```css
+@media (prefers-reduced-motion: reduce) {
+ .optionalAnimations {
+ animation-timeline: none;
+ }
+}
+```
+
+Because the `animation` shorthand sets the `animation-timeline` to `auto`, use a selector with enough specificity to ensure your `animation-timeline` isn't overridden by your `animation` shorthand declarations.
+
+## See also
+
+- [CSS animations](/en-US/docs/Web/CSS/Guides/Animations)
+- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)