animarte/animations/graph/bar-1.css

Making the digital world a little more animated place

.animarte {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  width: var(--animarte-size);
  height: var(--animarte-size);
  color: var(--animarte-color);
}

.animarte-graph--bar-1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 5%;
}
.animarte-graph--bar-1 .animarte-graph__element {
  display: flex;
  align-items: flex-end;
  background: currentColor;
  animation-name: graphBar1;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-duration: var(--animarte-speed);
  height: 0;
}
.animarte-graph--bar-1 .animarte-graph__element:nth-child(1) {
  --height: 20%;
}
.animarte-graph--bar-1 .animarte-graph__element:nth-child(2) {
  --height: 60%;
}
.animarte-graph--bar-1 .animarte-graph__element:nth-child(3) {
  --height: 40%;
}
.animarte-graph--bar-1 .animarte-graph__element:nth-child(4) {
  --height: 90%;
}
.animarte-graph--bar-1 .animarte-graph__element:nth-of-type(1) {
  animation-delay: calc(var(--animarte-speed) * 0.05 * 1);
}
.animarte-graph--bar-1 .animarte-graph__element:nth-of-type(2) {
  animation-delay: calc(var(--animarte-speed) * 0.05 * 2);
}
.animarte-graph--bar-1 .animarte-graph__element:nth-of-type(3) {
  animation-delay: calc(var(--animarte-speed) * 0.05 * 3);
}
.animarte-graph--bar-1 .animarte-graph__element:nth-of-type(4) {
  animation-delay: calc(var(--animarte-speed) * 0.05 * 4);
}

@keyframes graphBar1 {
  50% {
    height: var(--height);
  }
}