x
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div class="flex items-center flex-wrap gap"> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-starting-opacity-value="0" data-animation-var-value="--animate-fade-in"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-fade-in</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-fade-out"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-fade-out</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-starting-opacity-value="0" data-animation-var-value="--animate-fade-in-bloom"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-fade-in-bloom</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-fade-out-bloom"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-fade-out-bloom</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-scale-up"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-scale-up</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-scale-down"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-scale-down</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-out-up"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-slide-out-up</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-out-down"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-slide-out-down</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-out-right"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-slide-out-right</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-out-left"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-slide-out-left</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-in-up"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-slide-in-up</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-in-down"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-slide-in-down</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-in-right"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-slide-in-right</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-in-left"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-slide-in-left</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-spin"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-spin</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-ping"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-ping</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-blink"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-blink</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-float"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-float</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-bounce"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-bounce</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-pulse"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-pulse</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-shake-x"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-shake-x</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-shake-y"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-shake-y</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-shake-z"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-shake-z</button> </div></div>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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div class="flex items-center flex-wrap gap"> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-starting-opacity-value="0" data-animation-var-value="--animate-fade-in"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-fade-in</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-fade-out"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-fade-out</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-starting-opacity-value="0" data-animation-var-value="--animate-fade-in-bloom"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-fade-in-bloom</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-fade-out-bloom"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-fade-out-bloom</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-scale-up"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-scale-up</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-scale-down"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-scale-down</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-out-up"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-slide-out-up</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-out-down"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-slide-out-down</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-out-right"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-slide-out-right</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-out-left"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-slide-out-left</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-in-up"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-slide-in-up</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-in-down"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-slide-in-down</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-in-right"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-slide-in-right</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-in-left"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-slide-in-left</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-spin"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-spin</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-ping"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-ping</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-blink"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-blink</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-float"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-float</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-bounce"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-bounce</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-pulse"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-pulse</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-shake-x"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-shake-x</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-shake-y"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-shake-y</button> </div> <div class="card bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-shake-z"> <button class="btn btn--plain text-lg font-semibold" data-action="animation#run">--animate-shake-z</button> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.auto-animate > * { view-transition-class: auto-animation;}::view-transition-old(.auto-animation):only-child { animation: var(--animate-fade-out) forwards; animation-duration: var(--time-300); opacity: 1;}::view-transition-new(.auto-animation):only-child { animation: var(--animate-fade-in) forwards; animation-duration: var(--time-300); opacity: 0;}
Java Script is not required or multiple files are needed, check the notes.
These animations are available as CSS variables at animation.css. The animation stimulus controller is for demonstration purposes only.