code:
<div class="container animate flip">
<div class="one animate pop delay-1"></div>
<div class="two animate slide delay-2"></div>
<div class="three animate blur delay-3"></div>
<div class="four animate grow delay-4"></div>
<div class="five animate splat delay-5"></div>
</div>
<style>
.container {background: deepskyblue; margin-left:5vw; border-radius: 10vw; width: 52vw; height: 12vw; position: relative;}
.container div {height: 8vw; width: 8vw; position: absolute; border-radius: 5vw; top: 2vw;}
.container .one {background: #69143E; left: 1vw;}
.container .two {background: #FF5F36; left: 10vw;}
.container .three {background: #F9A229; left: 20vw;}
.container .four {background: #EDDE2E; left: 30vw;}
.container .five {background: #F4E4C1; left: 40vw;}
.animate {animation-duration: 4s; animation-delay: 0.5s; animation-name: animate-fade; animation-timing-function: cubic-bezier(.26,.53,.74,1.48); animation-fill-mode: backwards; }
.animate.fade {animation-name: animate-fade; animation-timing-function: ease;}
@keyframes animate-fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animate.pop {animation-name: animate-pop;}
@keyframes animate-pop {
0% {opacity: 0; transform: scale(0.5, 0.5);}
100% {opacity: 1;transform: scale(1, 1);}
}
.animate.blur {animation-name: animate-blur; animation-timing-function: ease;}
@keyframes animate-blur {
0% {opacity: 0; filter: blur(1.5vw);}
100% { opacity: 1; filter: blur(0vw);}
}
.animate.glow {animation-name: animate-glow; animation-timing-function: ease;}
@keyframes animate-glow {
0% {opacity: 0; filter: brightness(3) saturate(3); transform: scale(0.8, 0.8); }
100% { opacity: 1; filter: brightness(1) saturate(1); transform: scale(1, 1);}
}
.animate.grow {animation-name: animate-grow;}
@keyframes animate-grow {
0% {opacity: 0; transform: scale(1, 0); visibility: hidden;}
100% {opacity: 1; transform: scale(1, 1);}
}
.animate.splat {animation-name: animate-splat;}
@keyframes animate-splat {
0% {opacity: 0; transform: scale(0, 0) rotate(20deg) translate(0, -30px);}
70% { opacity: 1; transform: scale(1.1, 1.1) rotate(15deg);}
85% {opacity: 1; transform: scale(1.1, 1.1) rotate(15deg) translate(0, -10px);}
100% {opacity: 1; transform: scale(1, 1) rotate(0) translate(0, 0);}
}
.animate.roll {animation-name: animate-roll;}
@keyframes animate-roll {
0% {opacity: 0; transform: scale(0, 0) rotate(360deg);}
100% {opacity: 1; transform: scale(1, 1) rotate(0deg);}
}
.animate.flip {animation-name: animate-flip;
transform-style: preserve-3d; perspective: 1000px;}
@keyframes animate-flip {
0% {opacity: 0; transform: rotateX(-120deg) scale(0.9,0.9);}
100% {opacity: 1; transform: rotateX(0deg) scale(1,1);}
}
.animate.spin {animation-name: animate-spin;
transform-style: preserve-3d; perspective: 1000px;}
@keyframes animate-spin {
0% {opacity: 0; transform: rotateY(-120deg) scale(0.9,0.9);}
100% {opacity: 1; transform: rotateY(0deg) scale(1,1);}
}
.animate.slide { animation-name: animate-slide; }
@keyframes animate-slide {
0% {opacity: 0; transform: translate(0,20px);}
100% {opacity: 1; transform: translate(0,0);}
}
.animate.drop { animation-name: animate-drop; animation-timing-function: cubic-bezier(.77,.14,.91,1.25);}
@keyframes animate-drop {
0% {opacity: 0; transform: translate(0,-300px) scale(0.9, 1.1);}
95% {opacity: 1; transform: translate(0,0) scale(0.9, 1.1); }
96% {opacity: 1; transform: translate(10px,0) scale(1.2, 0.9);}
97% {opacity: 1; transform: translate(-10px,0) scale(1.2, 0.9);}
98% {opacity: 1; transform: translate(5px,0) scale(1.1, 0.9);}
99% {opacity: 1; transform: translate(-5px,0) scale(1.1, 0.9);}
100% {opacity: 1; transform: translate(0,0) scale(1, 1);}
}
/* Animation Delays */
.delay-1 {animation-delay: 0.6s;}
.delay-2 {animation-delay: 0.7s;}
.delay-3 {animation-delay: 0.8s;}
.delay-4 {animation-delay: 0.9s;}
.delay-5 {animation-delay: 1s;}
.delay-6 {animation-delay: 1.1s;}
.delay-7 {animation-delay: 1.2s;}
.delay-8 {animation-delay: 1.3s;}
.delay-9 {animation-delay: 1.4s;}
.delay-10 {animation-delay: 1.5s;}
.delay-11 {animation-delay: 1.6s;}
.delay-12 {animation-delay: 1.7s;}
.delay-13 {animation-delay: 1.8s;}
.delay-14 {animation-delay: 1.9s;}
.delay-15 {animation-delay: 2s;}
@media screen and (prefers-reduced-motion: reduce) {
.animate {animation: none !important;}
}
</style>
move and reshape
code:
<div class="spec">
<div class="first"></div>
<div class="second"></div>
<div>
<div class="third delay_16"></div>
<div class="third delay_17"></div>
<div class="third delay_18"></div>
</div>
<div>
<h3 class="fourth pop_one delay21">One!</h3>
<h3 class="fourth pop_one delay20">Two!</h3>
<h3 class="fourth pop_one delay19">Three!</h3>
</div>
</div>
<style>
.line-up{display: flex; flex-flow: row nowrap; width: 90vw; margin-left: 5vw; gap: 2vw;}
.first{margin-left: 2vw; background: green; height: 20vw; width: 20vw; border-radius:15%;}
.first {top:5%; animation-duration:15s; animation-name: being_first; animation-delay: 0.5s; transition: all linear; animation-fill-mode: backwards; }
@keyframes being_first {
0%, 100% {opacity: 0; transform: scale(1);}
50% {opacity: 1; transform: scale(0.5);}
}
.second {margin:2vw; background: #ff7a18; height: 10vw; width: 10vw; border-radius: 100%;}
.second{animation-name: being_second; animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48); animation-duration: 15s; transition: 1s all linear; }
@keyframes being_second {
0%, 100% {transform: translateX(-5vw);}
50% {transform: translateX(6vw);}
}
.third{margin-left: 2vw; background: deepskyblue; height: 5vw; width: 10vw; }
.third{animation-duration: 1s; animation-delay: 0.5s; animation-name: animate_fade; animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48); animation-fill-mode: backwards; }
.third{animation-name: animate_glow; animation-timing-function: ease;}
@keyframes animate_fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes animate_glow {
0%, 100% { opacity: 0; filter: brightness(3) saturate(3);transform: scale(0.8, 0.8); border-radius:5%;}
50% {opacity: 1; filter: brightness(1) saturate(1); transform: scale(1, 1); border-radius:50%/60%;}
}
.delay_16 {animation-delay: 0.4s;}
.delay_17 {animation-delay: 0.8s;}
.delay_18 {animation-delay: 1.2s;}
.fourth{animation-duration: 0.5s; animation-name: fading; animation-delay: 0.5s; animation-fill-mode: backwards;}
@keyframes fade {
0% {opacity: 0; }
100% { opacity: 1; }
}
.pop_one{animation-name:pop; animation-timing-function: cubic-bezier(.26,.53,.74,1.48);}
@keyframes pop {
0% {opacity: 0; transform: scale(0.5, 0.5); }
100% {opacity: 1; transform: scale(1, 1);}
}
.delay19 {color:black; animation-delay: 0.4s;}
.delay20 {color: yellow; animation-delay: 0.8s;}
.delay21 {color: red; animation-delay: 1.2s;}
</style>
flip the sample
code:
<div class="spec">
<button>Go</button>
<div class="element">♚ ☘ ☕ ✶ ☸</div>
</div>
<style>
.element {margin-top: 1vw; margin-left: 2vw; background: #6A1B9A; color: white; border-radius: 2vw; width: 20vw; height: 20vw; display: grid; place-items: center; font-size: 3vw;}
button {position: relative;background: darkblue; color: lightgreen; top: 15vw; left: -4vw; cursor: pointer;}
.flip {animation: flip 0.5s linear both;}
@keyframes flip{
0% {transform: scale(1) rotate3d(-1, 1, 0, 0deg);}
50% {transform: scale(0.5) rotate3d(-1, 1, 0, -90deg);}
100% {transform: scale(1) rotate3d(-1, 1, 0, -180deg);}
}
</style>
<script>
const button = document.querySelector("button");
button.addEventListener("click", e => {
document.querySelector(".element").classList.toggle("flip")
})
</script>
background color animation
code:
<div class="spec">
<div id="color2"></div>
<input type="button" value="animate color and rotate" onclick="document.getElementById('color2').classList.toggle('swap2')">
</div>
<style>
#color2{width: 20vw; height: 15vw;background-color: skyblue;}
@keyframes change {
0% { background-color: red; transform: scale(0.5) rotate(-45deg);}
50% { background-color: green; transform: scale(0.5) rotate(45deg); }
100% { background-color: burlywood; transform: scale(1) rotate(0deg);}
}
#color2.swap2 {animation: change 5s linear 0.3s;}
</style>
infinite animation loop
code:
code:
<div id="color3"></div>
<style>
#color3 { width: 20vw; height: 10vw; animation: coloring 5s linear 0.3s infinite;}
@keyframes coloring {
0% { background-color: red; transform: scale(1) rotate(0deg); }
25% { background-color: orange; transform: scale(0.8) rotate(5deg);}
50% { background-color: green; transform: scale(0.6) rotate(10deg);}
75% { background-color: blue; transform: scale(0.8) rotate(5deg); }
100% { background-color: red; transform: scale(1) rotate(0deg);}
}
</style>
bubbles
code:
<div class="spec">
<div class="bubble_1"></div>
<div class="bubble_2"></div>
</div>
<style>
.stretch{display: flex; width: 80vw; flex-flow: row nowrap; gap: 20vw;margin-left: 10vw;}
.bubble_1{height: 6vw; width: 6vw; margin: 2vw; animation-name: stretch; animation-duration: 1.5s; animation-timing-function:
ease-out; animation-delay: 0; animation-direction: alternate;animation-iteration-count: infinite;
animation-fill-mode: none; animation-play-state: running;}
.bubble_2{height: 10vw; width: 10vw; margin: 2vw; animation-name: stretch; animation-duration: 2.5s;
animation-timing-function: ease-in; animation-delay: 0; animation-direction: alternate;
animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running;}
@keyframes stretch {
0% { transform: scale(.3) rotate(20deg); background-color: red;border-radius: 100%;}
50% {background-color: orange; }
100% {transform: scale(1.5) rotate(-45deg); background-color:green; }
}
</style>
circles
code:
<div class="spec">
<div class="bubble_1a"></div>
<div class="bubble_2a"></div>
<div class="bubble_3a"></div>
</div>
<style>
.bubble_1a{height: 3vw; width: 3vw; animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate;
border-radius: 100%;}
.bubble_2a{height: 10vw; width: 10vw; animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate;
border-radius: 100%;}
.bubble_3a{height: 3vw; width: 3vw; animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate;
border-radius: 100%;}
@keyframes pulse {
0% {background-color: black;}
50% {background-color: yellow;}
100%{background-color:red;}
}
@keyframes nudge {
0%, 100% {transform: translate(0, 5vw);}
50% {transform: translate(75vw, 5vw);}
80% {transform: translate(5vw, 0vw);}
}
</style>
toggle
Toggle animations
I will play/pause
I will play/pause
I will play/pause
I will play/pause
I will play/pause
code:
<button id="js-toggle" class="btn" type="button">Toggle animations</button>
<div class="circle a-slide" data-animation="stop">I will play/pause</div>
<div class="circle a-slide" data-animation="once" style="--bgc:tomato;--animdel:250ms;">I will play/pause</div>
<div class="circle a-slide" data-animation="slow" style="--bgc:tan;--animdel:500ms;">I will play/pause</div>
<div class="circle a-slide" data-animation style="--bgc:orange;--animdel:750ms;">I will play/pause</div>
<div class="circle a-pulse" data-animation="alternate" style="--bgc:purple;">I will play/pause</div>
<style>
.btn {background-color: burlywood; border: 0 ;border-radius: 1vw; color: blue; display: inline-block; margin-block-end: 1vw; padding: 1vw; cursor: pointer; top: 0;}
.circle {--bgc: cornflowerblue; --w: 8.5vw; align-items: center; background-color: var(--bgc); border-radius: 50%; color: #FFF; display: flex; height: var(--w); justify-content: center; margin-bottom: 1vw;
width: var(--w); }
.a-pulse {--animdur: 2s; will-change: transform;--animn: pulse;}
.a-slide {--animdur: 3s; --animn: slide; }
[data-animation] { animation: var(--animn, none) var(--animdur, 0s) var(--animtf, linear) var(--animdel, 0s) var(--animic, infinite) var(--animdir, alternate) var(--animfm, none) var(--animps, running);}
/* KEYFRAMES */
@keyframes pulse {
0% {transform: scale(1);}
25% {transform: scale(.9);}
50% {transform: scale(1);}
75% {transform: scale(1.1);}
100% {transform: scale(1);}
}
@keyframes slide {
from { margin-left: 0%; }
to { margin-left: calc(100% - var(--w, 9vw)); }
}
</style>
<script>
/* Toggle Animations */
const jstoggle = document.getElementById('js-toggle');
jstoggle.addEventListener('click', () => {
const animations = document.querySelectorAll('[data-animation]');
animations.forEach(animation => {
const running = animation.style.animationPlayState || 'running';
animation.style.animationPlayState = running === 'running' ? 'paused' : 'running';
})
});
</script>
toggle 2
Toggle animation-duration (0 to 3s)
I will play/pause
I will play/pause
I will play/pause
I will play/pause
I will play/pause
code:
<input type="checkbox" data-animation-pause id="css-toggle" class="hidden" />
<label for="css-toggle" class="chk">Toggle animation-duration (0 to 3s)</label>
<div class="circle_a aa-slide" data-animation_a="stop">I will play/pause</div>
<div class="circle_a aa-slide" data-animation_a="once" style="--bgc:tomato;--animdel:250ms;">I will play/pause</div>
<div class="circle_a aa-slide" data-animation_a="slow" style="--bgc:tan;--animdel:500ms;">I will play/pause</div>
<div class="circle_a aa-slide" data-animation_a style="--bgc:orange;--animdel:750ms;">I will play/pause</div>
<div class="circle_a aa-pulse" data-animation_a="alternate" style="--bgc:purple;">I will play/pause</div>
<style>
.chk { align-items: center; cursor: pointer; display: inline-flex; user-select: none;}
.chk::before {--ico-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14 2.5l-8.5 8.5-3.5-3.5-1.5 1.5 5 5 10-10z"
fill="white"></path></svg>'); background: silver var(--ico-check) center center/70% no-repeat; border-radius: 0.25rem;
display: inline-block; content: ''; height: 1.25rem; margin-inline-end: 0.25rem; width: 1.25rem;}
.hidden {clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: inset(1px) display: block; height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;}
.circle_a {--bgc: cornflowerblue; --w: 9vw; align-items: center; background-color: var(--bgc); border-radius: 50%; color: #FFF; display: flex; height: var(--w); justify-content: center; margin-bottom: 1rem;
width: var(--w); }
.aa-pulse {--animdur: 0s;--animn: pulse_b; will-change: transform;}
.aa-slide {--animdur: 0s;--animn: slide_b;}
[data-animation_a] {animation: var(--animn, none) var(--animdur, 0s) var(--animtf, linear) var(--animdel, 0s) var(--animic, infinite) var(--animdir, alternate) var(--animfm, none) var(--animps, running);}
/* STATE */
[data-animation-pause]:checked ~ [data-animation_a] {--animdur: 3s; }
[data-animation-pause]:checked + label::before {background-color: cornflowerblue;}
/* KEYFRAMES */
@keyframes opacity {
0% {opacity: 1;}
50% {opacity: 0.6;}
100% {opacity: 1;}
}
@keyframes pulse_b {
0% {transform: scale(1);}
25% {transform: scale(.9);}
50% {transform: scale(1);}
75% {transform: scale(1.1);}
100% {transform: scale(1);}
}
@keyframes slide_b {
from { margin-left: 0%; }
to { margin-left: calc(100% - var(--w, 9vw)); }
}
</style>
pseudo-class ":checked"
top
":checked" pseudo-class
using: "display: none"
show content
Something before 🙃
This content should … toggle! 👻
Something after 🙂
using: "visibility: hidden"
show content
Something before 🙃
This content should … toggle! 👻
Something after 🙂
expanding/collapsing an overlay
show content
Something before 🙃
This content should … toggle! 👻
Something after 🙂
code:
<div class="spec">
<div>
<p class="intro">using: "display: none"</p>
<input type="checkbox" id="togglerDemo01">
<label for="togglerDemo01">show content</label>
<div>Something before 🙃</div>
<div class="demo01"> This content should … toggle! 👻</div>
<div>Something after 🙂</div>
</div>
<div>
<p class="intro">using: "visibility: hidden"</p>
<input type="checkbox" id="togglerDemo02">
<label for="togglerDemo02">show content</label>
<div>Something before 🙃</div>
<div class="demo02"> This content should … toggle! 👻</div>
<div>Something after 🙂</div>
</div>
<div>
<p class="intro">expanding/collapsing an overlay</p>
<input type="checkbox" id="togglerDemo03">
<label for="togglerDemo03">show content</label>
<div>Something before 🙃</div>
<div class="demo03">
<div class="demo03__content"> This content should … toggle! 👻</div>
</div>
<div>Something after 🙂</div>
</div>
<div>
<p class="intro">pointer events</p>
<input type="checkbox" id="togglerDemo04">
<label for="togglerDemo04">show content</label><br>
<input type="checkbox" id="outlineDemo04">
<label for="outlineDemo04">outline container</label>
<div>Something before 🙃</div>
<div class="demo04">
<div class="demo04__content">This content should … toggle! 👻</div>
</div>
<div>Something after 🙂</div>
</div>
<div>
<p class="intro">slide transition: translateY</p>
<input type="checkbox" id="togglerDemo05">
<label for="togglerDemo05">show content</label><br>
<input type="checkbox" id="outlineDemo05">
<label for="outlineDemo05">outline container</label>
<div>Something before 🙃</div>
<div class="demo05">
<div class="demo05__content">This content should … toggle! 👻
<button onclick="alert('click in sliding content')">Click me</button>
</div>
</div>
<div>Something after 🙂</div>
<div>
<button onclick="alert('click in content behind container')">Click me</button>
</div>
</div>
<div>
<p class="intro">expanding "letterbox"</p>
<input type="checkbox" id="togglerDemo06">
<label for="togglerDemo06">show content</label><br>
<input type="checkbox" id="outlineDemo06">
<label for="outlineDemo06">outline containers</label>
<div>Something before 🙃</div>
<div class="demo06">
<div class="demo06__letterbox">
<div class="demo06__content">This content should … toggle! 👻</div>
</div>
</div>
<div>Something after 🙂</div>
</div>
<div>
<p class="intro">expanding/collapsing in the document flow</p>
<input type="checkbox" id="togglerDemo07">
<label for="togglerDemo07">show content</label><br>
<input type="checkbox" id="outlineDemo07">
<label for="outlineDemo07">outline container</label>
<div>Something before 🙃</div>
<div class="demo07">
<div class="demo07__content">
<div class="demo07__padding">This content should … toggle! 👻</div>
</div>
</div>
<div>Something after 🙂</div>
</div>
<div>
<p class="intro">anchor content to the bottom</p>
<input type="checkbox" id="togglerDemo08">
<label for="togglerDemo08">show content</label><br>
<input type="checkbox" id="outlineDemo08">
<label for="outlineDemo08">outline container</label>
<div>Something before 🙃</div>
<div class="demo08">
<div class="demo08__content">
<div class="demo08__padding">This content should … toggle! 👻</div>
</div>
</div>
<div>Something after 🙂</div>
</div>
</div>
<style>
:root{--color-accent-200: lightgreen; --color-text:orangered;}
.frame{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(2vw, auto);margin-bottom: 4vw;}
.intro{color: blue; font-size: 1.2vw;}
.demo01 {background-color: var(--color-accent-200); color:var(--color-text); display: none; padding: 1vw;}
:checked ~ .demo01 {display: block;}
.demo02 {background-color: var(--color-accent-200); color:var(--color-text);height: 0; padding: 1vw; visibility: hidden;}
:checked ~ .demo02 { height: auto; visibility: visible;}
.demo03 {overflow: hidden;}
.demo03__content {background-color: var(--color-accent-200); color:var(--color-text);padding: 1vw; transition: transform 1s, visibility 1s; transform: translateY(-100%);
visibility: hidden;}
:checked ~ .demo03 .demo03__content {transform: translateY(0); visibility: visible;}
.demo04 {overflow: hidden; position: absolute;}
.demo04__content {background-color: var(--color-accent-200); color:var(--color-text);padding: 1vw; transform: translateY(-100%); transition: transform 1s, visibility 1s; visibility: hidden;}
#togglerDemo04:checked ~ .demo04 .demo04__content {transform: translateY(0);visibility: visible;}
#outlineDemo04:checked ~ .demo04 {outline: 0.1vw dashed red; outline-offset: 0.1vw;}
.demo05 {overflow: hidden; pointer-events: none; position: absolute;}
.demo05__content {background-color: var(--color-accent-200); color:var(--color-text);padding: 1vw; pointer-events: all; transform: translateY(-100%); transition: transform 1s, visibility 1s; visibility: hidden;}
#togglerDemo05:checked ~ .demo05 .demo05__content {transform: translateY(0); visibility: visible;}
#outlineDemo05:checked ~ .demo05 {outline: 0.2vw dashed red; outline-offset: 0.2vw;}
.demo06 {overflow: hidden; padding: 0.6vw; pointer-events: none; position: absolute;}
.demo06__letterbox {overflow: hidden; transform: translateY(-100%); transition: transform 1s, visibility 1s; visibility: hidden;}
.demo06__content {background-color: var(--color-accent-200); color:var(--color-text);padding: 1rem; pointer-events: all; transform: translateY(100%); transition: transform 1s;
}
#togglerDemo06:checked ~ .demo06 .demo06__letterbox {transform: translateY(0);visibility: visible;}
#togglerDemo06:checked ~ .demo06 .demo06__content {transform: translateY(0);}
#outlineDemo06:checked ~ .demo06 {outline: 0.2vw dashed red; outline-offset: 0.4vw;}
#outlineDemo06:checked ~ .demo06 .demo06__letterbox {outline: 0.2vw dashed green; outline-offset: 0.4vw;}
.demo07 {overflow: hidden; display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 1s;}
.demo07__content { background-color: var(--color-accent-200); color:var(--color-text); align-self: end; min-height: 0; transition: visibility 1s; visibility: hidden;}
.demo07__padding { padding: 1vw;}
#togglerDemo07:checked ~ .demo07 {grid-template-rows: 1fr;}
#togglerDemo07:checked ~ .demo07 .demo07__content {visibility: visible;}
#outlineDemo07:checked ~ .demo07 {outline: 0.2vw dashed orange; outline-offset: 0.4vw;}
.demo08 {overflow: hidden; display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 1s;}
.demo08__content {background-color: var(--color-accent-200); color:var(--color-text); min-height: 0; transition: visibility 1s; visibility: hidden;}
.demo08__padding {padding: 1vw;}
#togglerDemo08:checked ~ .demo08 {grid-template-rows: 1fr;}
#togglerDemo08:checked ~ .demo08 .demo08__content {visibility: visible;}
#outlineDemo08:checked ~ .demo08 {outline: 0.2vw dashed orange; outline-offset: 0.4vw;}
</style>
CSS-based animations
top
background color transition and rotation
code:
<div class="spec">
<div id="color1"></div>
<input type="button" value="swap color and rotate" onclick="document.getElementById('color1').classList.toggle('swap1')">
</div>
<style>
input{background: lightgreen; text-align: center; font-size: 1vw; margin: 0.5vw; cursor: pointer;}
#color1 { width: 20vw; height: 15vw; background-color: burlywood; transition: background-color 1s }
#color1.swap1 {background-color: #e00; transform: scale(0.5) rotate(45deg);}
</style>
text-shadow property
Dare to dream the impossible dream !!
code:
<div>
<h4>Dare to dream the impossible dream !!</h4>
</div>
<style>
h4 {font-size: 4vw; line-height: calc(20px + 20vh);
text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; color: #fff6a9; font-family: "Sacramento", cursive; text-align:
center; animation: blink 12s infinite; -webkit-animation: blink 12s infinite;}
@-webkit-keyframes blink {
20%, 24%, 55% {color: #111; text-shadow: none;}
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; color: #fff6a9; }
}
@keyframes blink {
20%, 24%, 55% {color: #111; text-shadow: none;}
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; color: #fff6a9; }
}
</style>
text-shadow property
Harder Better Faster Stronger
code:
<div>
<h4 class="one"> <span>Harder</span> <span>Better</span>
<span>Faster</span><span>Stronger</span></h4>
</div>
<style>
h4.one {font-family: "Paytone One"; color: #202020; text-transform: uppercase; letter-spacing: -0.2vw;}
h4.one span {display: block; margin: 1.1vw 0 1.7vw 0; font-size: 5vw; line-height: 5vw; color: dodgerblue; text-shadow: 0 1.4vw 0.9vw #c4b59d, 0 -1vw 1vw green; letter-spacing: -0.4vw;
animation: shine 12s linear infinite}
@keyframes shine{
0%, 100%{opacity: 0}
50%{opacity: 1}
}
</style>
box animations
top
open a letter
code:
<div class="prime">
<div class="letter-image">
<div class="animated-mail">
<div class="back-fold"></div>
<div class="letter">
<div class="letter-border"></div>
<div class="letter-title"></div>
<div class="letter-context"></div>
<div class="letter-stamp">
<div class="letter-stamp-inner"></div>
</div>
</div>
<div class="top-fold"></div>
<div class="body"></div>
<div class="left-fold"></div>
</div>
<div class="shadow"></div>
</div>
</div>
<style>
.prime {background: #323641; width:35vw; height: 40vh;}
.letter-image {position: relative; top: 50%; left: 50%; width: 20vw; height: 20vw; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
cursor: pointer; }
.animated-mail {position: absolute; height: 15vw; width: 20vw; -webkit-transition: .4s; -moz-transition: .4s; transition: .4s;}
.body {position: absolute; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 10vw 20vw; border-color: transparent transparent #e95f55 transparent; z-index: 2;}
.top-fold {position: absolute; top: 5vw; width: 0; height: 0; border-style: solid; border-width: 5vw 10vw 0 10vw; -webkit-transform-origin: 50% 0%; -webkit-transition: transform .4s .4s, z-index .2s .4s;
-moz-transform-origin: 50% 0%; -moz-transition: transform .4s .4s, z-index .2s .4s; transform-origin: 50% 0%; transition: transform .4s .4s, z-index .2s .4s; border-color: #cf4a43 transparent transparent
transparent; z-index: 2;}
.back-fold {position: absolute; bottom: 0; width: 20vw; height: 10vw; background: #cf4a43; z-index: 0;}
.left-fold {position: absolute; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 5vw 0 5vw 10vw; border-color: transparent transparent transparent #e15349; z-index: 2;}
.letter {left: 2vw; bottom: 0vw; position: absolute; width: 16vw; height: 6vw; background: white; z-index: 1; overflow: hidden; -webkit-transition: .4s .2s; -moz-transition: .4s .2s; transition: .4s .2s;}
.letter-border { height: 1vw; width: 100%; background: repeating-linear-gradient(-45deg, #cb5a5e, #cb5a5e .8vw, transparent .8vw, transparent 1.8vw);}
.letter-title {margin-top: 1vw; margin-left: .5vw; height: 1vw; width: 40%; background: #cb5a5e;}
.letter-context {margin-top: 1vw; margin-left: .5vw; height: 1vw; width: 20%; background: #cb5a5e;}
.letter-stamp {margin-top: 3vw; margin-left: 12vw; border-radius: 100%; height: 3vw; width: 3vw; background: #cb5a5e; opacity: 0.3;}
.shadow {position: relative; top: 20vw; left: 50%; width: 40vw; height: 3vw; transition: .4s; transform: translateX(-50%); -webkit-transition: .4s; -webkit-transform: translateX(-50%); -moz-transition: .4s;
-moz-transform: translateX(-50%); border-radius: 100%; background: radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.0), rgba(0,0,0,0.0));}
.letter-image:hover .animated-mail{transform: translateY(5vw); -webkit-transform: translateY(5vw); -moz-transform: translateY(5vw);}
.animated-mail:hover .top-fold {transition: transform .4s, z-index .2s; transform: rotateX(180deg); -webkit-transition: transform .4s, z-index .2s; -webkit-transform: rotateX(180deg);
-moz-transition: transform .4s, z-index .2s; -moz-transform: rotateX(180deg); z-index: 0; }
.letter-image:hover .animated-mail .letter{height: 18vw;}
.shadow:hover { width: 25vw;}
</style>
jumping box
code:
<div id="second">
<div id="parcel">📦</div>
</div>
<style>
@keyframes pop {
0% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
50% { transform: translate(-50%, -150%) scale(1, 1); }
55% { transform: translate(-50%, -150%) rotate(15deg); }
60% { transform: translate(-50%, -150%) rotate(-15deg); }
65% { transform: translate(-50%, -150%) rotate(15deg); }
70% { transform: translate(-50%, -150%) rotate(-15deg); }
100% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
}
#second{background: #7db9e8; background: -moz-radial-gradient(center, ellipse cover, #7db9e8 0%, #21374b 100%); background: -webkit-radial-gradient(center, ellipse cover, #7db9e8 0%,#21374b 100%);
background: radial-gradient(ellipse at center, #7db9e8 0%,#21374b 100%); margin: 1vw; width: 30vw; height: 40vh;}
#parcel {position: absolute; left: 15%; top: 110vw; z-index: 2; margin-bottom: 3vw; transform: translate(-25%, -25%); font-size: 7vw; animation: poppy 6s infinite;}
</style>
hover animation
hover over me
code:
<div class="stella">hover over me</div>
<style>
.stella {display: flex; align-items: center; justify-content: center; position: relative; margin: 2vw auto; width: 25vw; height: 25vw; background: skyblue; border-radius: 7.5vw;
font-family: 'Montserrat', sans-serif; font-size: 2vw; font-weight: lighter; letter-spacing: .2vw; transition: 1s box-shadow;}
.stella:hover {box-shadow: 0 .5vw 3.5vw 0vw rgba(0,0,0,.1);}
.stella:hover::before, .stella:hover::after {display: block; content: ''; position: absolute; width: 25vw; height: 25vw; background: #FDA8CF; border-radius: 7.5vw; z-index: -1; animation: 1s clockwise infinite;}
.stella:hover:after {background: #F3CE5E; animation: 2s counterclockwise infinite; }
@keyframes clockwise {
0% {top: -.5vw; left: 0;}
12% {top: -.2vw; left: .2vw;}
25% {top: 0; left: .5vw;}
37% {top: .2vw; left: .2vw;}
50% {top: 2.5vw; left: 0;}
62% {top: 2vw; left: -2vw;}
75% {top: 0; left: -.5vw; }
87% {top: -.2vw; left: -.2vw;}
100% {top: -2.5vw; left: 0;}
}
@keyframes counterclockwise {
0% {top: -5vw; right: 0; }
12% {top: -.2vw; right: .2vw;}
25% {top: 0; right: .5vw; }
37% {top: .2vw; right: .2vw;}
50% {top: .5vw; right: 0;}
62% {top: .2vw; right: -.2vw;}
75% {top: 0; right: -5vw;}
87% {top: -2vw; right: -2vw;}
100% {top: -.5vw; right: 0;}
}
</style>