animarte/animations/clock/crazy-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-clock {
  --radius: calc((var(--animarte-size) - 50%) / 2);
}
.animarte-clock--crazy-1 .animarte-clock__element:nth-child(1), .animarte-clock--crazy-1 .animarte-clock__element:nth-child(2), .animarte-clock--crazy-1 .animarte-clock__element:nth-child(3), .animarte-clock--crazy-1 .animarte-clock__element:nth-child(4) {
  position: absolute;
  left: 50%;
  top: 50%;
}
.animarte-clock--crazy-1 .animarte-clock__element:nth-child(1), .animarte-clock--crazy-1 .animarte-clock__element:nth-child(2) {
  border-radius: 100vw;
  width: 8%;
  animation-name: clockCrazy1;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: top;
  translate: -50% 0%;
}
.animarte-clock--crazy-1 .animarte-clock__element:nth-child(1) {
  height: 40%;
  background: currentColor;
  animation-duration: calc(var(--animarte-speed) / 3);
}
.animarte-clock--crazy-1 .animarte-clock__element:nth-child(2) {
  height: 30%;
  animation-duration: var(--animarte-speed);
  background: color-mix(in srgb, currentColor 50%, transparent);
}
.animarte-clock--crazy-1 .animarte-clock__element:nth-child(3), .animarte-clock--crazy-1 .animarte-clock__element:nth-child(4) {
  transform: translate(-50%, -50%);
}
.animarte-clock--crazy-1 .animarte-clock__element:nth-child(3) {
  width: 8%;
  height: 8%;
  background-color: currentColor;
  border: 1px solid color-mix(in srgb, currentColor 90%, #000);
  background: currentColor;
  border-radius: 100vw;
}
.animarte-clock--crazy-1 .animarte-clock__element:nth-child(4) {
  width: 100%;
  height: 100%;
  border: 4px solid currentColor;
  border-radius: 100vw;
}

@keyframes clockCrazy1 {
  to {
    transform: rotate(1turn);
  }
}