-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.qmd
206 lines (157 loc) · 9.37 KB
/
example.qmd
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
---
title: 'Animate.css Extension for Quarto'
format: html
---
## Using the extension
This extension provides support and shortcode to [animate.css](https://animate.style/).
Animations are only available for HTML-based documents.
It provides an `{{{< animate >}}}` shortcode:
- Mandatory `<effect>` and `<text>`:
``` markdown
{{{< animate <effect> "<text>" >}}}
```
- Optional `<delay=...>`, `<duration=...>`, and `<repeat=...>`:
``` markdown
{{{< animate <effect> "<text>" <delay=...> <duration=...> <repeat=...> >}}}
```
`<delay=...>` and `<duration=...>` are durations requiring unit, _e.g._, `1s` or `800ms`.
See <https://animate.style/> for more details.
For example:
| Shortcode | Text |
| -------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| `{{{< animate bounce "Some text" >}}}` | {{< animate bounce "Some text" >}} |
| `{{{< animate flip "Some text" repeat=2 >}}}` | {{< animate flip "Some text" repeat=2 >}} |
| `{{{< animate hinge "Some text" delay=3s duration=4s repeat=infinite >}}}` | {{< animate hinge "Some text" delay=1s duration=2s repeat=infinite >}} |
## Available effects:
### Attention seekers
- {{< animate bounce "`bounce`" repeat=infinite duration=4s >}}
- {{< animate flash "`flash`" repeat=infinite duration=4s >}}
- {{< animate pulse "`pulse`" repeat=infinite duration=4s >}}
- {{< animate rubberBand "`rubberBand`" repeat=infinite duration=4s >}}
- {{< animate shakeX "`shakeX`" repeat=infinite duration=4s >}}
- {{< animate shakeY "`shakeY`" repeat=infinite duration=4s >}}
- {{< animate headShake "`headShake`" repeat=infinite duration=4s >}}
- {{< animate swing "`swing`" repeat=infinite duration=4s >}}
- {{< animate tada "`tada`" repeat=infinite duration=4s >}}
- {{< animate wobble "`wobble`" repeat=infinite duration=4s >}}
- {{< animate jello "`jello`" repeat=infinite duration=4s >}}
- {{< animate heartBeat "`heartBeat`" repeat=infinite duration=4s >}}
### Back entrances
- {{< animate backInDown "`backInDown`" repeat=infinite duration=4s >}}
- {{< animate backInLeft "`backInLeft`" repeat=infinite duration=4s >}}
- {{< animate backInRight "`backInRight`" repeat=infinite duration=4s >}}
- {{< animate backInUp "`backInUp`" repeat=infinite duration=4s >}}
### Back exits
- {{< animate backOutDown "`backOutDown`" repeat=infinite duration=4s >}}
- {{< animate backOutLeft "`backOutLeft`" repeat=infinite duration=4s >}}
- {{< animate backOutRight "`backOutRight`" repeat=infinite duration=4s >}}
- {{< animate backOutUp "`backOutUp`" repeat=infinite duration=4s >}}
### Bouncing entrances
- {{< animate bounceIn "`bounceIn`" repeat=infinite duration=4s >}}
- {{< animate bounceInDown "`bounceInDown`" repeat=infinite duration=4s >}}
- {{< animate bounceInLeft "`bounceInLeft`" repeat=infinite duration=4s >}}
- {{< animate bounceInRight "`bounceInRight`" repeat=infinite duration=4s >}}
- {{< animate bounceInUp "`bounceInUp`" repeat=infinite duration=4s >}}
### Bouncing exits
- {{< animate bounceOut "`bounceOut`" repeat=infinite duration=4s >}}
- {{< animate bounceOutDown "`bounceOutDown`" repeat=infinite duration=4s >}}
- {{< animate bounceOutLeft "`bounceOutLeft`" repeat=infinite duration=4s >}}
- {{< animate bounceOutRight "`bounceOutRight`" repeat=infinite duration=4s >}}
- {{< animate bounceOutUp "`bounceOutUp`" repeat=infinite duration=4s >}}
### Fading entrances
- {{< animate fadeIn "`fadeIn`" repeat=infinite duration=4s >}}
- {{< animate fadeInDown "`fadeInDown`" repeat=infinite duration=4s >}}
- {{< animate fadeInDownBig "`fadeInDownBig`" repeat=infinite duration=4s >}}
- {{< animate fadeInLeft "`fadeInLeft`" repeat=infinite duration=4s >}}
- {{< animate fadeInLeftBig "`fadeInLeftBig`" repeat=infinite duration=4s >}}
- {{< animate fadeInRight "`fadeInRight`" repeat=infinite duration=4s >}}
- {{< animate fadeInRightBig "`fadeInRightBig`" repeat=infinite duration=4s >}}
- {{< animate fadeInUp "`fadeInUp`" repeat=infinite duration=4s >}}
- {{< animate fadeInUpBig "`fadeInUpBig`" repeat=infinite duration=4s >}}
- {{< animate fadeInTopLeft "`fadeInTopLeft`" repeat=infinite duration=4s >}}
- {{< animate fadeInTopRight "`fadeInTopRight`" repeat=infinite duration=4s >}}
- {{< animate fadeInBottomLeft "`fadeInBottomLeft`" repeat=infinite duration=4s >}}
- {{< animate fadeInBottomRight "`fadeInBottomRight`" repeat=infinite duration=4s >}}
### Fading exits
- {{< animate fadeOut "`fadeOut`" repeat=infinite duration=4s >}}
- {{< animate fadeOutDown "`fadeOutDown`" repeat=infinite duration=4s >}}
- {{< animate fadeOutDownBig "`fadeOutDownBig`" repeat=infinite duration=4s >}}
- {{< animate fadeOutLeft "`fadeOutLeft`" repeat=infinite duration=4s >}}
- {{< animate fadeOutLeftBig "`fadeOutLeftBig`" repeat=infinite duration=4s >}}
- {{< animate fadeOutRight "`fadeOutRight`" repeat=infinite duration=4s >}}
- {{< animate fadeOutRightBig "`fadeOutRightBig`" repeat=infinite duration=4s >}}
- {{< animate fadeOutUp "`fadeOutUp`" repeat=infinite duration=4s >}}
- {{< animate fadeOutUpBig "`fadeOutUpBig`" repeat=infinite duration=4s >}}
- {{< animate fadeOutTopLeft "`fadeOutTopLeft`" repeat=infinite duration=4s >}}
- {{< animate fadeOutTopRight "`fadeOutTopRight`" repeat=infinite duration=4s >}}
- {{< animate fadeOutBottomRight "`fadeOutBottomRight`" repeat=infinite duration=4s >}}
- {{< animate fadeOutBottomLeft "`fadeOutBottomLeft`" repeat=infinite duration=4s >}}
### Flippers
- {{< animate flip "`flip`" repeat=infinite duration=4s >}}
- {{< animate flipInX "`flipInX`" repeat=infinite duration=4s >}}
- {{< animate flipInY "`flipInY`" repeat=infinite duration=4s >}}
- {{< animate flipOutX "`flipOutX`" repeat=infinite duration=4s >}}
- {{< animate flipOutY "`flipOutY`" repeat=infinite duration=4s >}}
### Lightspeed
- {{< animate lightSpeedInRight "`lightSpeedInRight`" repeat=infinite duration=4s >}}
- {{< animate lightSpeedInLeft "`lightSpeedInLeft`" repeat=infinite duration=4s >}}
- {{< animate lightSpeedOutRight "`lightSpeedOutRight`" repeat=infinite duration=4s >}}
- {{< animate lightSpeedOutLeft "`lightSpeedOutLeft`" repeat=infinite duration=4s >}}
### Rotating entrances
- {{< animate rotateIn "`rotateIn`" repeat=infinite duration=4s >}}
- {{< animate rotateInDownLeft "`rotateInDownLeft`" repeat=infinite duration=4s >}}
- {{< animate rotateInDownRight "`rotateInDownRight`" repeat=infinite duration=4s >}}
- {{< animate rotateInUpLeft "`rotateInUpLeft`" repeat=infinite duration=4s >}}
- {{< animate rotateInUpRight "`rotateInUpRight`" repeat=infinite duration=4s >}}
### Rotating exits
- {{< animate rotateOut "`rotateOut`" repeat=infinite duration=4s >}}
- {{< animate rotateOutDownLeft "`rotateOutDownLeft`" repeat=infinite duration=4s >}}
- {{< animate rotateOutDownRight "`rotateOutDownRight`" repeat=infinite duration=4s >}}
- {{< animate rotateOutUpLeft "`rotateOutUpLeft`" repeat=infinite duration=4s >}}
- {{< animate rotateOutUpRight "`rotateOutUpRight`" repeat=infinite duration=4s >}}
### Specials
- {{< animate hinge "`hinge`" repeat=infinite duration=4s >}}
- {{< animate jackInTheBox "`jackInTheBox`" repeat=infinite duration=4s >}}
- {{< animate rollIn "`rollIn`" repeat=infinite duration=4s >}}
- {{< animate rollOut "`rollOut`" repeat=infinite duration=4s >}}
### Zooming entrances
- {{< animate zoomIn "`zoomIn`" repeat=infinite duration=4s >}}
- {{< animate zoomInDown "`zoomInDown`" repeat=infinite duration=4s >}}
- {{< animate zoomInLeft "`zoomInLeft`" repeat=infinite duration=4s >}}
- {{< animate zoomInRight "`zoomInRight`" repeat=infinite duration=4s >}}
- {{< animate zoomInUp "`zoomInUp`" repeat=infinite duration=4s >}}
### Zooming exits
- {{< animate zoomOut "`zoomOut`" repeat=infinite duration=4s >}}
- {{< animate zoomOutDown "`zoomOutDown`" repeat=infinite duration=4s >}}
- {{< animate zoomOutLeft "`zoomOutLeft`" repeat=infinite duration=4s >}}
- {{< animate zoomOutRight "`zoomOutRight`" repeat=infinite duration=4s >}}
- {{< animate zoomOutUp "`zoomOutUp`" repeat=infinite duration=4s >}}
### Sliding entrances
- {{< animate slideInDown "`slideInDown`" repeat=infinite duration=4s >}}
- {{< animate slideInLeft "`slideInLeft`" repeat=infinite duration=4s >}}
- {{< animate slideInRight "`slideInRight`" repeat=infinite duration=4s >}}
- {{< animate slideInUp "`slideInUp`" repeat=infinite duration=4s >}}
### Sliding exits
- {{< animate slideOutDown "`slideOutDown`" repeat=infinite duration=4s >}}
- {{< animate slideOutLeft "`slideOutLeft`" repeat=infinite duration=4s >}}
- {{< animate slideOutRight "`slideOutRight`" repeat=infinite duration=4s >}}
- {{< animate slideOutUp "`slideOutUp`" repeat=infinite duration=4s >}}
## Advanced
The following won't work:
```markdown
{{{< animate bounce "[HTML](https://m.canouil.fr/quarto-animate/)" >}}}
```
But this will:
```markdown
[[HTML](https://m.canouil.fr/quarto-animate/)]{.animate__animated .animate__bounce style="display:inline-block;"}
```
[[HTML](https://m.canouil.fr/quarto-animate/)]{.animate__animated .animate__bounce style="display:inline-block;"}
Or:
```markdown
::: {.animate__animated .animate__bounce}
[HTML](https://m.canouil.fr/quarto-animate/)
:::
```
::: {.animate__animated .animate__bounce}
[HTML](https://m.canouil.fr/quarto-animate/)
:::