Google Chrome
CSS DevRel 🥑; #VisBug creator; dev += designer; parentNode + 2 leafs; CSS/JS/UX addict; repeat(∞, [empathize, define, design, develop, deploy]); 🖖
Published
Edited
Apr 30, 2018
17 stars
html`
<style>
@keyframes present-yourself {
to {
opacity: 1;
transform: translate3d(0,0,0);
}
}
</style>
`
html`
<style>
.slide_up_in, custom-element, whatever {
/* out/start state */
transform: translateY(2rem);
opacity: 0;
/* in/end state */
animation: present-yourself 1s ease forwards;
}
</style>
`
html`
<style>
.override_animation, custom-element.--modifier {
animation-name: newer_animation;
}
.remove_animation {
animation-name: none;
}
/* or remove the class/selector that's applying the animation to the node */
</style>
`
html`
<style>
.sandbox {
--box-color: hsl(175,50%,50%);
transform: perspective(50rem) translateZ(-25rem) translateY(5rem) rotateY(180deg) rotateX(10deg);
opacity: 0;
animation: present-yourself 1s ease forwards;
}
</style>
`
html`
<style>
.stagger-box {
--box-color: hsl(150,50%,50%);
transform: scale(0.01, 0.01);
animation: present-yourself 1s ease forwards;
}
.stagger-box:nth-of-type(2) { animation-delay: 0.1s; }
.stagger-box:nth-of-type(3) { animation-delay: 0.2s; }
</style>
`
html`
<style>
.stagger-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 3rem;
text-align: center;
}
.stagger-container > p {
transform: translateY(1em);
opacity: 0;
animation: present-yourself 1s ease forwards;
}
.stagger-container > p:nth-of-type(2) { animation-delay: 0.1s; }
.stagger-container > p:nth-of-type(1) { animation-delay: 0.2s; }
</style>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
