Revision:
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
using: "display: none"
using: "visibility: hidden"
expanding/collapsing an overlay
pointer events
slide transition: translateY
expanding "letterbox"
expanding/collapsing in the document flow
anchor content to the bottom
<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>
<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>
<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>
<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>
<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>
<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>
<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>
Et hinc magna voluptatum usu, cum veniam graece et. Ius ea scripserit temporibus, pri cu harum tacimates neglegentur. At adipisci incorrupte nam. Cu qui sumo appareat constituto, possit phaedrum inciderint ex usu, quis ignota cotidieque nam ea. Cum deserunt periculis ocurreret.
Habemus principes eos id, eu sonet patrioque nam. Eu his mazim insolens, et vim saperet laboramus. Enim gubergren temporibus vix ei. Dicunt iuvaret sadipscing te nam, legere assueverit sed in, at everti labores.
Dico facilis dissentias mea cu. Nam assum eripuit an.
Scaevola definitiones eum et. Assum postulant periculis per ei. Doming scribentur sea an. Eum verear docendi tincidunt in.
Ne duo posse deserunt, at eam euismod torquatos, est velit essent in. Et diam meliore cotidieque vim. Dicit ignota repudiandae ei pri.
<div class="container">
<div class="post-wrap">
<div class="post">
<div class="post-front">
<div class="post-img" style="background-image: url('../images/1.jpg');"></div>
<div class="post-info">
<span>May 22, 2021</span>
<h3>Holidays and Covid-19: expectations vs reality</h3>
</div>
</div>
<div class="post-back">
<div class="post-except">
<h3>Holidays and Covid-19: expectations vs reality</h3>
<p>Et hinc magna voluptatum usu, cum veniam graece et. Ius ea scripserit temporibus,
pri cu harum tacimates neglegentur. At adipisci incorrupte nam. Cu qui sumo appareat
constituto, possit phaedrum inciderint ex usu, quis ignota cotidieque nam ea. Cum deserunt
periculis ocurreret.</p>
</div>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="post-wrap">
<div class="post">
<div class="post-front">
<div class="post-img" style="background-image: url('../images/2.jpg');"></div>
<div class="post-info">
<span>May 22, 2021</span>
<h3>Asian perspectives on holidays and leisure during the epidemic.</h3>
</div>
</div>
<div class="post-back">
<div class="post-excerpt">
<h3>Asian perspectives on holidays and leisure during the epidemic.</h3>
<p>Habemus principes eos id, eu sonet patrioque nam. Eu his mazim insolens, et vim
saperet laboramus. Enim gubergren temporibus vix ei. Dicunt iuvaret sadipscing te nam,
legere assueverit sed in, at everti labores.
</p>
<p>Dico facilis dissentias mea cu. Nam assum eripuit an.</p>
</div>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="post-wrap">
<div class="post">
<div class="post-front">
<div class="post-img" style="background-image: url('../images/3.jpg');"></div>
<div class="post-info">
<span>May 24, 2021</span>
<h3>This week's top stories in fighting the virus.</h3>
</div>
</div>
<div class="post-back">
<div class="post-except">
<h3>This week's top stories in fighting the virus.</h3>
<p>
Scaevola definitiones eum et. Assum postulant periculis per ei. Doming scribentur
sea an. Eum verear docendi tincidunt in.
</p>
<p>
Ne duo posse deserunt, at eam euismod torquatos, est velit essent in. Et diam meliore
cotidieque vim. Dicit ignota repudiandae ei pri.
</p>
</div>
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
<style>
.container1 {max-width: 160vw; margin: auto; padding: 2vw; display: flex;justify-content: center; flex-wrap: wrap;}
.post-wrap {min-width: 25vw; max-width: 30vw; height: 40vw; perspective: 50vw; flex: 1; margin: 0 1.5vw 2vw;}
.post {position: relative; width: 100%; height: 100%; transition: transform 1s; transform-style: preserve-3d; }
.post-front, .post-back { position: absolute; width: 100%; height: 100%; background-color: rgb(184, 230, 172);
-webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 1vw; box-shadow: 0 4px 6px
-1px rgba(0, 0, 0, 0.1);}
.post-back {transform: rotateY(180deg);}
.post-wrap:hover .post { transform: rotateY(180deg);}
.post-img {background-size: cover; background-position: center;height: 28vw; border-top-left-radius: 1vw;
border-top-right-radius: 1vw;}
.post-info {padding: 2vw 3vw 3vw;}
.post-info span {font-size: 0.8vw; color: #808080;}
.post-info h2{font-weight: bold;font-size: 1.2vw; padding-top: 0.5vw;}
.post-back {background-color: #e4b5b5; padding: 3vw;display: flex; flex-direction: column;justify-content:
space-between; align-items: flex-start;}
.post-back h2{font-weight: bold; font-size: 1.2vw; padding-top: 0.5vw;}
.post-back p {margin-top: 1vw; line-height: 1.6;}
.post-back a{text-decoration: none; color: #ffffff; background-color: #5678ba; padding: 1vw 1.4vw; text-transform:
uppercase; letter-spacing: 0.05vw; font-size: 0.8vw; font-weight: bold; border-radius: 0.5vw;}
</style>
<div id="wrapper">
<div class="cube_a">
<!--Front-->
<div>front</div>
<!--Back-->
<div>back</div>
<!--Left-->
<div>left</div>
<!--Right-->
<div>right</div>
<!--Top-->
<div>top</div>
<!--Bottom-->
<div>bottom</div>
</div>
</div>
<style>
#wrapper{width:20vw; height:20vw; perspective:70vw; -webkit-perspective:70vw; margin:12vw auto;}
.cube_a{position:relative; width:26vw; height:26vw; transform-style:preserve-3d; transform:rotateX(25deg)
rotateY(-55deg); transition:300ms ease-in; animation: turn 15s 1s linear infinite;}
.cube_a div{position:absolute; width:28vw; height:28vw; background:rgba(0,0,0,0.1);color: white; text-align: center;}
.cube_a div:nth-child(1){transform:rotateX(0deg) translateZ(14vw); background-image:url("../images/1.jpg"); background-size: cover;}
.cube_a div:nth-child(2){transform: rotateX(180deg) translateZ(14vw); background-image:url("../images/2.jpg"); background-size: cover;}
.cube_a div:nth-child(3){transform: rotateY(-90deg) translateZ(14vw); background-image:url("../images/3.jpg"); background-size: cover;}
.cube_a div:nth-child(4){transform:rotateY(90deg) translateZ(14vw); background-image:url("../images/8.jpg"); background-size: cover;}
.cube_a div:nth-child(5){transform: rotateX(90deg) translateZ(14vw); background-image:url("../images/5.jpg"); background-size: cover; }
.cube_a div:nth-child(6){transform:rotateX(-90deg) translateZ(14vw); background-image:url("../images/6.jpg"); background-size: cover; }
@keyframes turn{
0%{transform:rotateX(25deg) rotateY(-55deg);}
10%{transform:rotateX(35deg) rotateY(65deg);}
20%{transform:rotateX(45deg) rotateY(-75deg);}
30%{transform:rotateX(-55deg) rotateY(85deg);transform: translate(20vw);}
40%{transform:rotateX(65deg) rotateY(95deg);}
50%{transform:rotateX(70deg) rotateY(120deg);}
60%{transform:rotateX(60deg) rotateY(-90deg);}
70%{transform:rotateX(-50deg) rotateY(80deg);transform: translate(-20vw);}
80%{transform:rotateX(40deg) rotateY(70deg);}
90%{transform:rotateX(30deg) rotateY(60deg);}
100%{transform:rotateX(25deg) rotateY(-55deg);}
}
</style>