Public
Edited
Mar 10, 2023
<div class="container">
<div class="box"></div>
</div>
<style>
@property --w {
syntax: '<length>';
initial-value: 0px;
inherits:false;
}
@property --h {
syntax: '<length>';
initial-value: 0px;
inherits:false;
}
@property --c {
syntax: '<color>';
initial-value: red;
inherits:false;
}
.container {
height: 6em;
--w:3em;
--h-:3em;
}
.box {
animation: 3s linear 0s infinite an;
animation-fill-mode: both;
width: var(--w);
height: var(--h);
background: var(--c);
}
@keyframes an {
0% {
--w:3em;
--h:3em;
--c:pink;
}
50% {
--w:6em;
--h:3em;
--c:green;
}
100% {
--w:9em;
--h:3em;
--c:orange;
}
}
</style>
<div class="container-2">
<div class="box-2"></div>
</div>
<style>
.container-2 {
height: 6em;
}
.box-2 {
animation: 5s linear 0s 1 an2;
animation-fill-mode: both;
width: 3em;
height: 3em;
background: pink;
/* transition: all 0.3s; */
}
@keyframes an2 {
0% {
width: 6em;
/* transition-property: none; */
}
25% {
width: 9em;
}
50% {
width: 12em;
}
100% {
width: 3em;
}
}
</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.
