CSS Scroll Animation
CSS Scroll Animation
Scroll animation utilize the property animation-timeline:view, a modern CSS feature that allows animations to be controlled based on an element’s position within the viewport.
1
animation-timeline: view(start-position end-position);
The percentage value in the view means: Start-position: When the animation starts as the element enters the viewport, i.e., percentage the element position from the top of the view that animation will start.
end-position: When the animation ends as the element exits the viewport, i.e., percentage the element position from the bottom of the view that animation will end.
Create the following css style
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
body{
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #4eafff;
}
.cube{
width: 100px;
height: 100px;
background-color: #ff4e4e;
}
.autoRotate{
animation: autoRotateAnimation;
animation-timeline: view();
}
@keyframes autoRotateAnimation{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
The value both ensures that the animation will be continous, i.e., it retains the property at 0% before the start of the animation and at 100% after the start of the animation.
1
animation: autoRotateAnimation both;
1
animation: fadeIn linear;
This creates a smooth, scroll-linked fade-in effect.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.autoShow{
animation: autoShowAnimation both;
animation-timeline: view(70% 5%);
animation: fadeIn linear;
}
@keyframes autoShowAnimation{
from{
opacity: 0;
transform: translateY(200px) scale(0.3);
}to{
opacity: 1;
transform: translateY(0) scale(1);
}
}
Note that when the element is around middle 45%-55%, the element is clear to see.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.autoBLur{
animation: autoBLurAnimation linear both;
animation-timeline: view();
}
@keyframes autoBLurAnimation{
0%{
filter: blur(40px);
}
45%, 55%{
filter: blur(0px);
}
100%{
filter: blur(40px);
}
}