consul/website/source/assets/stylesheets/consul-connect/_animations.scss

.g-animation-block {
  width: 70%;
  margin: 0 auto;
  opacity: 0.4;
  transition: all 0.5s ease;

  &.active {
    opacity: 1;
  }
}

#configuration-challenge-animation {
  & #c-line-8,
  & #c-line-7,
  & #c-line-6,
  & #c-line-5,
  & #c-line-4,
  & #c-line-3,
  & #c-line-2,
  & #c-line-1 {
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
  }

  & #c-box-1,
  & #c-box-2,
  & #c-box-3,
  & #c-box-4,
  & #c-box-5,
  & #c-box-6,
  & #c-box-7,
  & #c-box-8 {
    opacity: 0.5;
  }

  & #c-loading-bar > rect:last-child {
    width: 0;
  }
}

#configuration-solution-animation {
  & #s-line-1,
  & #s-line-2,
  & #s-line-3,
  & #s-line-4,
  & #s-line-5,
  & #s-line-6,
  & #s-line-7,
  & #s-line-8 {
    stroke-dasharray: 58;
    stroke-dashoffset: 58;
  }
  & #s-service-box-1,
  & #s-service-box-2,
  & #s-service-box-3,
  & #s-service-box-4,
  & #s-service-box-5,
  & #s-service-box-6,
  & #s-service-box-7,
  & #s-service-box-8 {
    opacity: 0.5;
  }
  & #s-progress-indicator {
    width: 0;
  }
  & #s-dots {
    opacity: 0;
  }
}

#discovery-challenge-animation {
  & #c-box-left-placement {
    opacity: 0;
  }

  & #c-broken-link-left {
    opacity: 0;
  }

  & #c-broken-link-right {
    opacity: 0;
  }

  & #c-computer {
    opacity: 0;
  }

  & #c-computer-to-load-balancers #c-arrow-down {
    opacity: 0;
  }

  & #c-computer-to-load-balancers #c-arrow-right {
    opacity: 0;
  }

  & #c-computer-to-load-balancers #c-arrow-left {
    opacity: 0;
  }

  & #c-computer-to-load-balancers #c-circle {
    opacity: 0;
  }

  & #c-computer-to-load-balancers #c-edit-box {
    opacity: 0;
  }

  & #c-load-balancer-left > #c-progress-bar,
  & #c-load-balancer-right > #c-progress-bar-2,
  & #c-load-balancer-middle > #c-progress-bar-3 {
    opacity: 0;
  }

  & #c-load-balancer-left > #c-progress-bar > *:last-child,
  & #c-load-balancer-right > #c-progress-bar-2 > *:last-child,
  & #c-load-balancer-middle > #c-progress-bar-3 > *:last-child {
    width: 0;
  }

  & #c-line-horizontal-right {
    stroke-dasharray: 65;
    stroke-dashoffset: 65;
  }

  & #c-line-horizontal-right > line {
    stroke: #000;
  }

  & #c-line-top-right {
    stroke-dasharray: 17;
    stroke-dashoffset: 17;
  }

  & #c-line-bottom-right {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
  }

  & #c-line-top-left {
    stroke-dasharray: 17;
    stroke-dashoffset: 0;
  }

  & #line-bottom-left {
    stroke-dasharray: 56;
    stroke-dashoffset: 0;
  }

  & #c-line-top-left > * {
    stroke: #3969ed;
  }
  & #c-line-bottom-left > * {
    stroke: #3969ed;
  }
  & #c-line-bottom-right > * {
    stroke: #000;
  }
  & #c-box-far-left > path {
    fill: #3969ed;
  }
}

#discovery-solution-animation {
  & #s-active-service-3 {
    display: none;
  }
  & #s-connected-line-2 {
    stroke-dasharray: 270;
    stroke-dashoffset: 270;
  }
  & #s-connected-line-1 {
    stroke-dasharray: 222;
  }
  & #s-dotted-line-left {
    opacity: 0;
  }
  & #s-dotted-lines-right {
    opacity: 0;
  }
  & #s-dotted-lines-right > path:last-child {
    opacity: 0;
  }
  & #s-dynamic-sync-right {
    opacity: 0;
  }
  & #s-dynamic-sync-left {
    opacity: 0;
  }
  & #s-dynamic-sync-left > path {
    transform-origin: 88px 127px;
  }
  & #s-dotted-service-box-2 {
    opacity: 0;
  }
}

#segmentation-challenge-animation {
  & #c-firewall-updates #c-update_path {
    opacity: 0;
  }
  & #c-firewall-updates #c-edit {
    opacity: 0;
  }
  & #c-computer {
    opacity: 0;
  }
  & #c-progress-indicator,
  & #c-progress-indicator-2,
  & #c-progress-indicator-3 {
    opacity: 0;
  }
  & #c-broken-link-1,
  & #c-broken-link-2,
  & #c-broken-link-3 {
    opacity: 0;
  }
  & #c-box-2,
  & #c-box-4,
  & #c-box-6 {
    opacity: 0;
  }

  & #c-path-1 > *:nth-child(1) {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
  }
  & #c-path-1 > *:nth-child(2) {
    stroke-dasharray: 94;
    stroke-dashoffset: 94;
  }
  & #c-path-1 > *:nth-child(3) {
    stroke-dasharray: 102;
    stroke-dashoffset: 102;
  }
  & #c-path-2 > *:nth-child(1) {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
  }
  & #c-path-2 > *:nth-child(2) {
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
  }
  & #c-path-2 > *:nth-child(3) {
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
  }
  & #c-path-2 > *:nth-child(3) {
    stroke-dasharray: 148;
    stroke-dashoffset: 148;
  }
  & #c-path-3 > *:nth-child(1) {
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
  }
  & #c-path-3 > *:nth-child(2) {
    stroke-dasharray: 54;
    stroke-dashoffset: 54;
  }
  & #c-path-3 > *:nth-child(3) {
    stroke-dasharray: 126;
    stroke-dashoffset: 126;
  }
}

#segmentation-solution-animation {
  #s-service-2 {
    opacity: 0;
  }
  #s-service-4 {
    opacity: 0;
  }
  #s-service-6 {
    opacity: 0;
  }
  #s-service-2 > path {
    fill: #000;
  }
  #s-service-4 > path {
    fill: #000;
  }
  #s-service-6 > path {
    fill: #000;
  }
  #s-secure-indicator-2 {
    opacity: 0;
  }
  #s-secure-indicator-4 {
    opacity: 0;
  }
  #s-secure-indicator-6 {
    opacity: 0;
  }
  #s-connection-path-6 {
    stroke-dasharray: 161;
    stroke-dashoffset: 161;
  }
  #s-connection-path-5 {
    stroke-dasharray: 73;
    stroke-dashoffset: 73;
  }
  #s-connection-path-4 {
    stroke-dasharray: 115;
    stroke-dashoffset: 115;
  }
  #s-connection-path-1 {
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
  }
  #s-connection-path-2 {
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
  }
  #s-connection-path-8 {
    stroke-dasharray: 73;
    stroke-dashoffset: 73;
  }
  #s-connection-path-10 {
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
  }
  #s-connection-path-9 {
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
  }
  #s-consul-inbound-paths-lower,
  #s-dynamic-update-inbound-lower {
    opacity: 0;
  }
  #s-consul-inbound-paths-upper,
  #s-dynamic-update-inbound-upper {
    opacity: 0;
  }
  #s-consul-server-connection-lower,
  #s-consul-outbound-5,
  #s-consul-outbound-6,
  #s-consul-outbound-7 {
    opacity: 0;
  }
  #s-tls-cert-lower,
  #s-dynamic-update-outbound-ower {
    opacity: 0;
  }

  #s-consul-server-connection-upper,
  #s-consul-outbound-1,
  #s-soncul-outbound-2,
  #s-consul-outbound-3,
  #s-consul-outbound-4 {
    opacity: 0;
  }
  #s-tls-cert-upper,
  #s-dynamic-update-outbound-upper {
    opacity: 0;
  }
}