Skip to content

Commit 6e2107b

Browse files
jh3yjh3y
committed
feat: add missing demos from collection
1 parent f22a3b2 commit 6e2107b

File tree

12 files changed

+979
-0
lines changed

12 files changed

+979
-0
lines changed

‎public/19.animation-delay-demo/css/style.css

Lines changed: 672 additions & 0 deletions
Large diffs are not rendered by default.

‎public/19.animation-delay-demo/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>animation-delay demo</title>
6+
<link rel="stylesheet" href="css/style.css" />
7+
</head>
8+
9+
<body>
10+
<h1>No delay</h1>
11+
<h1>Delay</h1>
12+
<h1>Negative Delay</h1>
13+
<h1>Staggered</h1>
14+
<h1>Staggered w/ Negative Delay</h1>
15+
<h1>Staggered w/ Alternate Direction</h1>
16+
<p>Animate simultaneously with no delay</p>
17+
<p>Animate simultaneously with a delay</p>
18+
<p>Animate simultaneously with a negative delay</p>
19+
<p>Use a variable to create a stagger</p>
20+
<p>
21+
Use an offset to make the delays negative so that the elements retain
22+
stagger but don't stagger in
23+
</p>
24+
<p>
25+
Use a negative coefficient to create a stagger in the opposite direction
26+
</p>
27+
<pre><code>.block {</code><code> animation-delay: 0s;</code><code>}</code></pre>
28+
<pre><code>.block {</code><code> animation-delay: 2s;</code><code>}</code></pre>
29+
<pre><code>.block {</code><code> animation-delay: -0.5s;</code><code>}</code></pre>
30+
<pre><code>.block {</code><code> animation-delay: calc(var(--index) * 0.25s);</code><code>}</code></pre>
31+
<pre><code>.block {</code><code> animation-delay: calc((var(--index) - 5) * 0.25s);</code><code>}</code></pre>
32+
<pre><code>.block {</code><code> animation-delay: calc(var(--index) * -0.25s);</code><code>}</code></pre>
33+
<div class="container">
34+
<div class="block" style="--index: 0;"></div>
35+
<div class="block" style="--index: 1;"></div>
36+
<div class="block" style="--index: 2;"></div>
37+
<div class="block" style="--index: 3;"></div>
38+
<div class="block" style="--index: 4;"></div>
39+
</div>
40+
<input type="range" min="0" max="5" value="0" />
41+
<script src="js/index.js"></script>
42+
</body>
43+
</html>

‎public/19.animation-delay-demo/js/index.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// Get started!
2+
const RANGE = document.querySelector('input')
3+
const CONTAINER = document.querySelector('.container')
4+
const TITLES = [...document.querySelectorAll('h1')]
5+
const BLURBS = [...document.querySelectorAll('p')]
6+
const CODES = [...document.querySelectorAll('pre')]
7+
8+
// Each config reps delay, duration, stagger, coefficient, offset
9+
const STEP_CONFIGS = [
10+
[0, 2, 0, 1, 0],
11+
[2, 2, 0, 1, 0],
12+
[-0.5, 2, 0, 1, 0],
13+
[0, 2, 0.25, 1, 0],
14+
[0, 2, 0.25, 1, -5],
15+
[0, 2, 0.25, -1, 0],
16+
]
17+
18+
const update = () => {
19+
// Show/Hide elements
20+
for (let e = 0; e < TITLES.length; e++) {
21+
TITLES[e].style.display = BLURBS[e].style.display = CODES[e].style.display =
22+
e === parseInt(RANGE.value, 10) ? 'block' : 'none'
23+
}
24+
// Running the step function
25+
const CONFIG = STEP_CONFIGS[parseInt(RANGE.value, 10)]
26+
document.documentElement.style.setProperty('--delay', CONFIG[0])
27+
document.documentElement.style.setProperty('--duration', CONFIG[1])
28+
document.documentElement.style.setProperty('--stagger-step', CONFIG[2])
29+
document.documentElement.style.setProperty('--coefficient', CONFIG[3])
30+
document.documentElement.style.setProperty('--offset', CONFIG[4])
31+
// Retrigger the animation
32+
CONTAINER.hidden = true
33+
requestAnimationFrame(() => (CONTAINER.hidden = false))
34+
}
35+
36+
RANGE.addEventListener('change', update)
37+
// Run the first time to show step 0 👍
38+
update()

‎public/20.sibling-squares/css/style.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
div {
2+
animation-name: spin;
3+
animation-duration: 1s;
4+
animation-timing-function: ease-out;
5+
}
6+
7+
@keyframes spin {
8+
0,
9+
50% {
10+
transform: rotate(0deg);
11+
}
12+
100% {
13+
transform: rotate(360deg);
14+
}
15+
}

‎public/20.sibling-squares/index.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Sibling squares</title>
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
7+
<link rel="stylesheet" href="css/style.css">
8+
</head>
9+
10+
<body>
11+
<style>
12+
* {
13+
box-sizing: border-box;
14+
}
15+
html, body {
16+
align-items: center;
17+
background: linear-gradient(45deg, #f62459, #674172);
18+
display: flex;
19+
justify-content: center;
20+
margin: 0;
21+
min-height: 100vh;
22+
padding: 0;
23+
width: 100vw;
24+
}
25+
div {
26+
background-color: #fafafa;
27+
height: 100px;
28+
width: 100px;
29+
}
30+
</style>
31+
<div></div>
32+
<div></div>
33+
<div></div>
34+
</body>
35+
</html>

‎public/21.no-curved-path/css/style.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
div {
2+
animation: throw 2s ease 1s both infinite;
3+
}
4+
@keyframes throw {
5+
0% {
6+
transform: translate(-25vw, 0);
7+
}
8+
50% {
9+
transform: translate(0, -20vh);
10+
}
11+
100% {
12+
transform: translate(25vw, 0);
13+
}
14+
}

‎public/21.no-curved-path/index.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Spin counter with animationiteration 🔄</title>
6+
<link rel="stylesheet" href="css/style.css" />
7+
</head>
8+
9+
<body>
10+
<style>
11+
* {
12+
box-sizing: border-box;
13+
}
14+
html, body {
15+
align-items: center;
16+
background: linear-gradient(45deg, #1f3a93, #f39c12);
17+
display: flex;
18+
justify-content: center;
19+
margin: 0;
20+
min-height: 100vh;
21+
padding: 0;
22+
width: 100vw;
23+
}
24+
div {
25+
background: #fff;
26+
border-radius: 100%;
27+
height: 50px;
28+
margin: 40px;
29+
width: 50px;
30+
}
31+
</style>
32+
<div></div>
33+
<script src="js/index.js"></script>
34+
</body>
35+
</html>

‎public/22.no-fill-mode/css/style.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
div {
2+
animation-name: fadeIn;
3+
animation-duration: .5s;
4+
animation-timing-function: ease-out;
5+
animation-fill-mode: none;
6+
}
7+
8+
div:nth-of-type(1) {
9+
animation-delay: 1s;
10+
}
11+
12+
div:nth-of-type(2) {
13+
animation-delay: 1.5s;
14+
}
15+
16+
div:nth-of-type(3) {
17+
animation-delay: 2s;
18+
}
19+
20+
@keyframes fadeIn {
21+
from {
22+
opacity: 0;
23+
}
24+
}

‎public/22.no-fill-mode/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>No animation-fill-mode</title>
6+
<link rel="stylesheet" href="css/style.css" />
7+
</head>
8+
9+
<body>
10+
<style>
11+
* {
12+
box-sizing: border-box;
13+
}
14+
html,
15+
body {
16+
align-items: center;
17+
background: linear-gradient(45deg, #e74c3c, #00e640);
18+
display: flex;
19+
justify-content: center;
20+
margin: 0;
21+
min-height: 100vh;
22+
padding: 0;
23+
width: 100vw;
24+
}
25+
div {
26+
background-color: #fafafa;
27+
border-radius: 100%;
28+
height: 50px;
29+
margin: 0 10px;
30+
width: 50px;
31+
}
32+
</style>
33+
<div></div>
34+
<div></div>
35+
<div></div>
36+
<script src="js/index.js"></script>
37+
</body>
38+
</html>

‎public/23.no-persistent-shrinking/css/style.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
div {
2+
animation-name: shrink;
3+
animation-duration: .5s;
4+
animation-timing-function: ease-out;
5+
animation-fill-mode: none;
6+
animation-delay: 1s;
7+
}
8+
9+
@keyframes shrink {
10+
to {
11+
transform: scale(0.5);
12+
}
13+
}

‎public/23.no-persistent-shrinking/index.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>No persistent shrinking</title>
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
9+
/>
10+
<link rel="stylesheet" href="css/style.css" />
11+
</head>
12+
13+
<body>
14+
<style>
15+
* {
16+
box-sizing: border-box;
17+
}
18+
html,
19+
body {
20+
align-items: center;
21+
background: linear-gradient(45deg, #db05ab, #00e640);
22+
display: flex;
23+
justify-content: center;
24+
margin: 0;
25+
min-height: 100vh;
26+
padding: 0;
27+
width: 100vw;
28+
}
29+
div {
30+
background-color: #fafafa;
31+
height: 300px;
32+
width: 300px;
33+
}
34+
</style>
35+
<div></div>
36+
</body>
37+
</html>

‎public/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,21 @@ <h1>A Guide to CSS Animation 📽</h1>
9696
<li>
9797
<a href='/18.worm-loader-with-curved-path/' target='_blank'>Worm Loader with curved path</a>
9898
</li>
99+
<li>
100+
<a href='/19.animation-delay-demo/' target='_blank'>animation-delay demo</a>
101+
</li>
102+
<li>
103+
<a href='/20.sibling-squares/' target='_blank'>Sibling squares</a>
104+
</li>
105+
<li>
106+
<a href='/21.no-curved-path/' target='_blank'>Animation with no curved path</a>
107+
</li>
108+
<li>
109+
<a href='/22.no-fill-mode/' target='_blank'>Animation without animation-fill-mode set</a>
110+
</li>
111+
<li>
112+
<a href='/23.no-persistent-shrinking/' target='_blank'>Animation without persistent end state</a>
113+
</li>
99114
</ol>
100115
</body>
101116
</html>

0 commit comments

Comments
 (0)