<div class="c-mm">
<details>
<summary class="c-mm__play"><span data-css-icon="play"><i></i></span></summary>
<span hidden></span>
</details>
<div class="c-mm__inner">
<figure data-filter="grainy text" class="c-mm__frame" style="--animn:none;--index:0;">
<figcaption>
»The Boy Who Loved Comics«
<div>A Personal Story</div>
</figcaption>
</figure>
<figure data-filter="grainy" class="c-mm__frame" style="--animn:kenburns-bottom-left;--index:1;">
<img class="c-mm__img" src="https://assets.stoumann.dk/img/silent/mads01.jpg" />
<figcaption data-caption="bottom left">
When I was 12 …
<div>I drew comics all day long</div>
</figcaption>
</figure>
<figure data-filter="grainy text" class="c-mm__frame" style="--animn:none;--index:2;">
<figcaption>
I Met All My Heroes!
<div>True Legends of Comics!</div>
</figcaption>
</figure>
<figure data-filter="grainy" class="c-mm__frame" style="--animn:kenburns-top;--index:3;">
<img class="c-mm__img" src="https://assets.stoumann.dk/img/silent/mads02.jpg" />
<figcaption data-caption="bottom left">
André Franquin
<div>Creator of Gaston Lagaffe</div>
</figcaption>
</figure>
<figure data-filter="grainy" class="c-mm__frame" style="--animn:kenburns-bottom-left;--index:4;">
<img class="c-mm__img" src="https://assets.stoumann.dk/img/silent/mads03.png" />
<figcaption data-caption="bottom left">
Carl Barks
<div>Disney Legend</div>
</figcaption>
</figure>
<figure data-filter="grainy" class="c-mm__frame" style="--animn:kenburns-bottom;--index:5;">
<img class="c-mm__img" src="https://assets.stoumann.dk/img/silent/mads04.png" />
<figcaption data-caption="top right">
Stan »The Man« Lee
<div>Marvel Legend</div>
</figcaption>
</figure>
<figure data-filter="grainy text" class="c-mm__frame" style="--animn:none;--index:6;">
<figcaption>
I Became A Graphic Designer!
<div>… And Comic Book Letterer!</div>
</figcaption>
</figure>
<figure data-filter="grainy" class="c-mm__frame" style="--animn:kenburns-top;--index:7;">
<img class="c-mm__img" src="https://assets.stoumann.dk/img/silent/mads05.jpg" />
<figcaption data-caption="top left">
Danish Marvel and DC
<div>»Beetle Bailey« and others …</div>
</figcaption>
</figure>
<figure data-filter="grainy" class="c-mm__frame" style="--animn:kenburns-bottom-left;--index:8;">
<img class="c-mm__img" src="https://assets.stoumann.dk/img/silent/mads06.jpg" />
</figure>
<figure data-filter="grainy text" class="c-mm__frame" style="--animn:none;--index:9;">
<figcaption>
Today I'm A Front-End Developer!
<div>(But I still love comics!)</div>
</figcaption>
</figure>
</div>
<audio src="https://assets.stoumann.dk/audio/onion_capers.mp3" hidden loop></audio>
</div>
<p>
<strong>Music Creadits:</strong> »Onion Capers« Kevin MacLeod (incompetech.com). Licensed under Creative Commons: <a href="http://creativecommons.org/licenses/by/3.0">By Attribution 3.0 License</a>
</p>
<svg>
<filter id="noise">
<feTurbulence baseFrequency="0.60" xresult="colorNoise" />
<feColorMatrix in="colorNoise" type="matrix" values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0"/>
<feComposite operator="in" in2="SourceGraphic" result="monoNoise"/>
<feBlend in="SourceGraphic" in2="monoNoise" mode="multiply" />
</filter>
</svg>@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Castoro&family=Smythe&display=swap');
.c-mm {
--h: 9;
--w: 16;
--z: 100; /* z-index begin */
--animdur: 18000ms; /* 3 times the duration */
--animtf: ease-out;
--dist: clamp(0.75rem, 10vw, 1.5rem);
--slides: 20;
font-size: 1rem;
position: relative;
}
.c-mm::before {
content: '';
display: block;
padding-bottom: calc(var(--h) / var(--w) * 100%);
}
[data-caption] {
--b: var(--dist);
--l: var(--dist);
--r: initial;
--t: initial;
bottom: var(--b);
color: rgba(255, 255, 255, 0.95);
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(1rem, 10vw, 4rem);
left: var(--l);
line-height: 1;
position: absolute;
right: var(--r);
top: var(--t);
}
[data-caption] div,
[data-filter] div {
font-family: 'Castoro', serif;
font-size: 50%;
}
[data-caption*="bottom"] {
--b: var(--dist);
--t: auto;
}
[data-caption*="left"] {
--l: var(--dist);
--r: auto;
}
[data-caption*="right"] {
--l: auto;
--r: var(--dist);
text-align: right;
}
[data-caption*="top"] {
--b: auto;
--t: var(--dist);
}
.c-mm__frame {
--animps: paused;
--img-animps: paused;
--index: 0;
animation: autoplay var(--animdur) infinite;
animation-delay: calc((var(--index) * var(--animdur)) / 3);
animation-play-state: var(--animps);
box-sizing: border-box;
height: 100%;
margin: 0;
opacity: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}
/* Alas, we cannot use var() in nth-selector :-(, so we need code for 3-20 items */
.c-mm__frame:nth-last-child(3):first-child,
.c-mm__frame:nth-last-child(3):first-child ~ .c-mm__frame {
animation-duration: var(--animdur);
}
.c-mm__frame:nth-last-child(4):first-child,
.c-mm__frame:nth-last-child(4):first-child ~ .c-mm__frame {
animation-duration: calc((4/3) * var(--animdur));
}
.c-mm__frame:nth-last-child(5):first-child,
.c-mm__frame:nth-last-child(5):first-child ~ .c-mm__frame {
animation-duration: calc((5/3) * var(--animdur));
}
.c-mm__frame:nth-last-child(6):first-child,
.c-mm__frame:nth-last-child(6):first-child ~ .c-mm__frame {
animation-duration: calc((6/3) * var(--animdur));
}
.c-mm__frame:nth-last-child(7):first-child,
.c-mm__frame:nth-last-child(7):first-child ~ .c-mm__frame {
animation-duration: calc((7/3) * var(--animdur));
}
.c-mm__frame:nth-last-child(8):first-child,
.c-mm__frame:nth-last-child(8):first-child ~ .c-mm__frame {
animation-duration: calc((8/3) * var(--animdur));
}
.c-mm__frame:nth-last-child(9):first-child,
.c-mm__frame:nth-last-child(9):first-child ~ .c-mm__frame {
animation-duration: calc((9/3) * var(--animdur));
}
.c-mm__frame:nth-last-child(10):first-child,
.c-mm__frame:nth-last-child(10):first-child ~ .c-mm__frame {
animation-duration: calc((10/3) * var(--animdur));
}
.c-mm__img {
animation-direction: alternate;
animation-duration: calc(var(--animdur) / 1.5);
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: var(--animn);
animation-play-state: var(--img-animps);
animation-timing-function: var(--animtf);
height: 100%;
object-fit: cover;
object-position: var(--x, 50%) var(--y, 50%);
position: absolute;
top: 0;
width: 100%;
will-change: transform;
}
.c-mm__inner {
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
.c-mm__play {
--size: clamp(3rem, 10vw, 4rem);
align-items: center;
background: rgba(235,235,235,0.9);
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
border-radius: 50%;
display: flex;
height: var(--size);
justify-content: center;
position: absolute;
bottom: var(--dist);
right: var(--dist);
user-select: none;
width: var(--size);
z-index: calc(var(--z) + var(--slides) + 1);
}
.c-mm__play:hover {
background: rgba(255,255,255,0.9);
}
/* CHECKBOX-HACK STATE */
[name="slideshow"]:checked ~ .c-mm__inner .c-mm__frame {
--animps: running;
--img-animps: running;
}
[name="slideshow"]:not(:checked) ~ .c-mm__inner .c-mm__frame {
--animps: paused;
--img-animps: paused !important;
}
[name="slideshow"]:not(:checked) ~ .c-mm__inner .c-mm__frame:first-of-type {
opacity: 1;
}
[name="slideshow"]:checked + label [data-css-icon*="play"] i::after {
--cpa: polygon(40% 0%,0% 0%,0% 100%,40% 100%,40% 0%,60% 0%,100% 0%,100% 100%,60% 100%,60% 0%);
}
/* DETAILS STATE */
details[open] ~ .c-mm__inner .c-mm__frame {
--animps: running;
--img-animps: running;
}
details:not([open]) ~ .c-mm__inner .c-mm__frame {
--animps: paused;
--img-animps: paused !important;
}
details:not([open]) ~ .c-mm__inner .c-mm__frame:first-of-type {
opacity: 1;
}
details[open] summary [data-css-icon*="play"] i::after {
--cpa: polygon(40% 0%,0% 0%,0% 100%,40% 100%,40% 0%,60% 0%,100% 0%,100% 100%,60% 100%,60% 0%);
}
summary::marker { display: none; }
summary::-webkit-details-marker { display: none; }
@keyframes autoplay {
0.1% { --img-animps: running; opacity: 0; z-index: calc(var(--z) + var(--slides)) }
5% { opacity: 1 }
50% { opacity: 1 }
51% { --img-animps: paused }
100% { opacity: 0; z-index: var(--z) }
}
/* ----------------------------------------------
* Generated by Animista on 2020-11-25 9:5:10
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
@keyframes kenburns-top{0%{transform:scale(1) translateY(0);transform-origin:50% 16%}100%{transform:scale(1.25) translateY(-15px);transform-origin:top}}
@keyframes kenburns-top-right{0%{transform:scale(1) translate(0,0);transform-origin:84% 16%}100%{transform:scale(1.25) translate(20px,-15px);transform-origin:right top}}
@keyframes kenburns-right{0%{transform:scale(1) translate(0,0);transform-origin:84% 50%}100%{transform:scale(1.25) translateX(20px);transform-origin:right}}
@keyframes kenburns-bottom-right{0%{transform:scale(1) translate(0,0);transform-origin:84% 84%}100%{transform:scale(1.25) translate(20px,15px);transform-origin:right bottom}}
@keyframes kenburns-bottom{0%{transform:scale(1) translateY(0);transform-origin:50% 84%}100%{transform:scale(1.25) translateY(15px);transform-origin:bottom}}
@keyframes kenburns-bottom-left{0%{transform:scale(1) translate(0,0);transform-origin:16% 84%}100%{transform:scale(1.25) translate(-20px,15px);transform-origin:left bottom}}
@keyframes kenburns-left{0%{transform:scale(1) translate(0,0);transform-origin:16% 50%}100%{transform:scale(1.25) translate(-20px,15px);transform-origin:left}}
@keyframes kenburns-top-left{0%{transform:scale(1) translate(0,0);transform-origin:16% 16%}100%{transform:scale(1.25) translate(-20px,-15px);transform-origin:top left}}
/* FROM CSS-ICONS-PEN, slightly modified */
[data-css-icon] {
--icon-size: 1.5rem;
--size: 3.75rem;
--bdrs: 50%;
--c: currentcolor;
align-items: center;
cursor: pointer;
display: flex;
justify-content: space-between;
}
[data-css-icon] i {
align-items: center;
border-radius: var(--bdrs);
box-sizing: content-box;
display: inline-flex;
height: var(--size);
justify-content: center;
position: relative;
width: var(--size);
}
[data-css-icon] i::after {
--cpa: none;
--h: var(--icon-size);
--w: var(--icon-size);
background-color: var(--bgcl);
clip-path: var(--cpa);
content: "";
display: inline-block;
height: var(--h);
margin: 0;
width: var(--w);
}
[data-css-icon*="play"] i::after {
--bgcl: var(--c);
--cpa: polygon(16% 0%,15% 100%,100% 50%);
}
/* SAFARI HACK */
@media not all and (min-resolution:.001dpcm) {
@supports (-webkit-appearance:none) {
summary [data-css-icon] i {
right: -2px;
top: 2px;
}
img { filter: grayscale(1); }
}
}
/* FILTERS */
[data-filter*="text"] figcaption {
--b: 0;
--l: 0;
--r: 0;
--t: 0;
animation: shake 1s ease-in-out infinite;
animation-play-state: var(--animps);
background-color: #444;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 768"><path fill="white" d="M623.6 151.9c-21.2 7-33.6 29-35.3 62.6-.5 9.6-.2 12.4 2 21.5 3 12.2 8.2 27.1 20 57 10.8 27.5 12.7 33.6 17.1 55.5 4.7 23.5 10.6 56.7 10.6 59.3 0 1.2.4 2.3.8 2.6.5.3 2.5-9.3 4.6-21.2 9.4-54.1 11.6-62.8 25.9-101.2 7.7-21 13.9-39.8 16.4-50 2.6-10.7 2.3-32-.5-45.5-4.2-19.8-14.4-34.3-27.9-39.6-8.3-3.2-25.4-3.7-33.7-1zM467.3 244.9c-22.3 7.7-29.7 31.9-15.3 50.1 7 8.8 21.6 16.3 52.5 27 20.4 7 31.8 12.4 44.1 20.6 9.7 6.4 24 19.6 31.6 29.2l5.2 6.5 1.4-3.4c4.8-11.6-5.4-42.1-23.2-69.4-12.1-18.5-28-36.3-42.1-47-7-5.3-21.9-12.8-28.7-14.4-7.1-1.7-19.5-1.3-25.5.8zM776.3 245.4c-14.3 4.7-28.1 14.3-43 29.9-22.8 23.8-42.9 59.5-47.4 84-1.1 6.3-.6 15 1.1 17.7.8 1.3 1.2 1.1 2.7-1 4.1-5.9 13.8-16.3 19.8-21.4 14.4-12.2 24.1-17.4 53.5-29 37.5-14.7 45.4-18.6 54.8-27.1 7.4-6.7 10.7-13.9 10.7-23.5 0-5.8-.5-8.6-2.3-12.1-3.6-7.4-8.7-12.5-16-16.1-6-3-7.6-3.3-16.7-3.5-8.3-.3-11.2.1-17.2 2.1z"/><path fill="white" d="M257 267c-23.8 3.1-44.7 13-57.4 27.3-14.3 15.9-21.2 39.9-18.6 64 3.7 33.8 22.8 56.8 55.5 67 12.5 3.9 21.8 5 36.7 4.4 14.2-.6 21.6-2.1 42.1-8.4 8-2.5 12.1-3.3 12.8-2.6 1.5 1.5-71.7 66.5-103.2 91.5-48.4 38.5-77.1 52.5-114.3 55.8-29.5 2.7-53.8-4.3-69.7-20-12.2-12-16.4-22.3-16.4-40 0-13.2 1.6-19.4 7.2-27.7 3.8-5.6 7.4-8.8 14-12.2 9.6-4.8 27.6-6.7 35.1-3.5 4 1.6 9.2 6.1 9.2 7.8 0 .6-2.3 2.3-5 3.8-6.6 3.7-9.3 8.9-9.4 17.8-.1 10.7 4.4 17 16 22.2 6.6 3 19.6 3.2 26.9.4 11.5-4.4 18.2-11.5 21.7-23 5.9-19.4-4.6-39.2-26.4-49.6-10.5-5.1-19.5-7-32.9-7-39.6 0-68.5 17.2-78.3 46.7-2.4 7.1-2.6 9.2-2.6 23.9 0 14.2.3 16.8 2.4 23 10 29.6 32.4 48.1 66.6 54.9 11.1 2.2 33.6 3 46 1.6 36.7-4.2 70.4-19.3 110.5-49.6 18.1-13.7 25.6-20.1 63-54 16-14.5 31.6-28.5 34.8-31.1 7.9-6.5 8.8-5.3 4.8 6.5-6.7 19.9-8.5 46.1-4.3 62.1 6.2 23.3 21 43.1 40.3 53.9 16.9 9.4 41.2 13.1 63.9 9.6 12-1.8 18.6-3.8 27.8-8.3 15.6-7.7 27.2-19.1 34.3-33.7 6.2-12.8 7-21 3.2-34.4-2.9-10.6-8.1-19.1-16.7-27.6-12.5-12.5-24.9-17.5-43.1-17.5-20 0-34.8 7.1-42 20.1-2.7 4.9-3 6.3-3 14.4 0 7.9.4 9.7 2.8 14.8 4.6 9.3 10.8 12.7 23.2 12.7 9.7 0 16.7-3.4 20.9-10.3 2.5-4.1 3-6.1 3.4-13.2.3-4.8 0-9.7-.7-11.6l-1.1-3.2 5 .5c7 .7 17.1 5.9 21.9 11.4 11.2 12.8 11.4 33.7.3 47.6-7.4 9.4-20.2 17.1-34 20.5-9.6 2.4-28.3 2.1-38.7-.6-28.8-7.4-44.1-27-46.9-60.1-.7-8.1.8-24.6 3-33.7 8.6-34.2 33-56.8 72.8-67.3 19-5 31.6-6.5 56.1-6.4 20 0 23.1.2 34.5 2.7 64.4 13.7 101.8 49.3 107.1 101.8 2.5 25.5-3.9 48.1-16.7 58.7-15.1 12.6-42.8 14.8-56.2 4.5-7.6-5.8-10.5-19.6-5.9-27.8 2.4-4.2 10.6-10.5 13.8-10.5 1.4 0 1.9.7 1.9 2.7 0 4.8 4.5 10.9 9.5 12.8 8.3 3.2 16.5-.6 21-10 2.3-4.6 2.7-6.4 2.1-10.2-1.2-9.1-8.3-17.1-18-20.3-2.4-.8-7-1.1-12.1-.8-20.5 1.1-39.2 17.6-41.1 36.4-2.5 23.8 12.1 42.8 36.8 48 8.7 1.9 26.7 1.3 36.8-1.1 21.4-5.2 38.3-20.1 45.6-40.2 1.5-4.1 3.2-7.2 3.7-7 .6.2 1.8 2.6 2.8 5.5 5.4 15.9 16.7 29.1 31 36.1 12.8 6.2 19.1 7.6 35.4 7.6 10.6 0 15.4-.5 19.9-1.9 23.5-7.1 34.8-22.4 33.4-45.2-.6-9.8-3.4-16.1-10.3-23-11-11-29.9-16.1-44.2-11.9-2.9.9-6.9 3.2-9.6 5.6-8.9 7.7-9.5 18.3-1.6 27.3 7 7.9 15 8.5 21.9 1.6 2.3-2.3 4.3-5.6 5-7.9 1.2-4.7 1.7-4.8 6.8-2.2 7.3 3.8 11.6 10.7 11.6 19.1.1 10.9-8 19.4-21.4 22.4-23 5.3-44.3-4.1-53.6-23.7-4.6-9.8-6.4-18.8-6.4-33.3 0-30.4 9.6-54.9 29.6-74.8 18.3-18.3 46.7-32.4 78.6-38.8 9.8-2 14.2-2.3 32.8-2.2 50.1.1 85.7 11.7 108.2 35.2 17.5 18.4 26.2 44 24.4 72.7-1.1 19.3-5.7 31.3-16.2 42.5-10.7 11.3-24.1 17.1-44.2 19.1-27.5 2.8-54.6-9.8-64-29.9-2.4-5.1-2.7-6.9-2.7-16.2 0-9.2.3-11.2 2.7-16.1 4.8-10.3 14.6-17.6 25.2-18.7l4.8-.5-.7 4.2c-.8 5.1 1.1 17.4 3.6 22.2 2.4 4.8 8 9.5 12.6 10.8 5.3 1.5 15.8 1.4 19.6-.2 9.4-4 14.8-12.8 15.5-25.4.4-7.4.2-8.8-2.2-13.7-6.7-13.7-22.5-21.6-43.1-21.6-10.7 0-18.4 1.8-28 6.4-24.5 12-39.1 42.9-31.5 66.7 7.5 23.3 29.8 41.3 59 47.6 12.5 2.7 36.4 2.4 48.3-.5 31-7.7 52.8-29.1 61.8-60.7 5.4-19 2.9-45.6-6.3-65.8-6.2-13.5-2.1-11.1 28.2 16.3 46 41.6 63.3 56.2 84 71 30.7 21.9 61.1 35.9 90.5 41.7 12.6 2.5 43.6 2.5 55.5 0 33.1-6.9 54.3-22.2 66.4-47.8 5.4-11.3 7.1-18.8 7-30.9-.1-30.5-17-54-46.1-64.1-15.7-5.4-41.7-7.6-54.8-4.5-26.8 6.3-45 28.1-41.6 49.6 2.1 12.9 9.2 22.4 20.9 27.8 4.8 2.2 7.1 2.7 14.7 2.7 11.4 0 18.1-2.2 24-7.9 10.6-10.2 8.2-28.1-4.7-34.7-2.1-1.1-3.8-2.3-3.8-2.8 0-1.9 4.3-6.1 8.3-8 8.4-4.1 26.2-2.2 37.9 4.1 13.3 7.1 19.8 19.8 19.8 38.8 0 16.1-4.9 28.8-15.3 39.2-14.5 14.5-33 21-59.7 21-50 0-86.3-19.9-174.5-96.1-43.3-37.3-57.6-50.4-56.6-51.4.7-.7 5.6.3 15.8 3.1 31.5 8.9 45.5 10.2 65.6 6.1 20.2-4.1 33.8-11 46.7-23.9 9.8-9.7 15.6-19.7 19.2-32.7 2.9-10.6 3.1-34.4.4-44.8-4.3-16.9-14.8-32.6-28-41.9-25.8-18.3-65-23.6-93.6-12.5-26.3 10.1-45 34.6-42.4 55.3 2.4 19 14.8 30.2 34.4 31.4 12 .7 18.9-1.4 25.1-7.6 5.4-5.5 7.4-11 6.6-18.8-1.3-13-9.8-20.2-24.1-20.7-3.4-.1-5.6-.7-5.6-1.3 0-1.7 6.8-10.5 10.7-13.8 13.9-11.8 44.7-11.1 67.1 1.5 8.4 4.7 19.3 16.2 23.1 24.3 11.5 23.9 5.6 55.5-13.2 72.1-6 5.3-18.6 11.8-27.2 14-18.3 4.8-42.1 2-77.5-9-28.1-8.8-75.9-18.1-115-22.6-24.5-2.7-50.8-3-66.2-.5-47.5 7.5-90.6 31.5-112.8 62.7-4.8 6.9-12.7 21.7-15.8 29.9l-1.4 3.5-1-2.5c-8.7-20.3-19.8-37.2-32.4-49-36-33.6-90.4-52-142.2-48.2-39 3-98 14.5-138.2 27.1-25.4 7.9-47 11.7-61.5 10.8-18.4-1.2-31.7-6.9-43.6-18.7-12.2-12.1-17-24.3-17-43-.1-17.9 4.6-29.5 16.6-41.5 11.7-11.8 26.9-18.2 45.1-19.2 19.3-1.1 33.2 4.5 41.6 16.7 2 3 3.8 5.7 3.8 6 0 .3-3 .7-6.7.8-12.7.3-20.8 6.5-23.3 17.7-3.7 16.8 8.3 29.5 28 29.5 17.4 0 30-7.6 35.2-21.3 10.5-27.6-12.2-58.7-49.8-68.3-10.7-2.7-27.1-3.8-37.4-2.4z"/></svg>');
background-position: bottom center;
background-repeat: no-repeat;
background-size: 50%;
box-sizing: border-box;
color: #FFF;
font-family: 'Smythe', serif;
font-size: clamp(1rem, 9vw, 5rem);
height: 100%;
padding: clamp(0.5rem, 10vw, 2rem);
text-align: center;
width: 100%;
}
[data-filter*="grainy"] {
filter: url(#noise) sepia(1) grayscale(0.6) brightness(0.7) contrast(1.05);
}
[data-filter*="grainy"] figcaption {
font-family: 'Smythe', serif;
}
[data-filter*="grainy"]::after {
box-shadow: inset 0px 0px 250px #000;
content: '';
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, -1px, 0);
}
20%, 80% {
transform: translate3d(1px, 1px, 0);
}
30%, 50%, 70% {
transform: translate3d(-1px, 1px, 0);
}
40%, 60% {
transform: translate3d(1px, 0, 0);
}
}
/* DEMO */
body { font-family: system-ui, sans-serif; margin: 0 auto; max-width: 54rem; padding: 1rem }
a, p { color: silver; font-size: small; }
/* WATCH IN CHROME ! */
const elements = document.querySelectorAll('.c-mm');
elements.forEach(element => {
const details = element.querySelector('.c-mm details');
const audio = element.querySelector('.c-mm audio');
if (details && audio) {
details.addEventListener('toggle', () => { details.open ? audio.play() : audio.pause(); })
}
})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.