Implementierung der CSS3-Button-Randanimation

<a href="#">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Weitergehen
</a>

Körper {
  Rand: 0;
  Polsterung: 0;
  Hintergrundfarbe: #035f3c;
}

A {
  Position: absolut;
  oben: 50 %;
  links: 50%;
  transformieren: übersetzen(-50 %, -50 %);
  -webkit-transform: übersetzen(-50 %, -50 %);
  -moz-transform: übersetzen(-50 %, -50 %);
  -ms-transform: übersetzen(-50 %, -50 %);
  -o-transform: übersetzen(-50 %, -50 %);
  Farbe: #16f03a;
  Polsterung: 30px 60px;
  Schriftgröße: 30px;
  Buchstabenabstand: 2px;
  Texttransformation: Großbuchstaben;
  Textdekoration: keine;
  Kastenschatten: 0 20px 50px rgba (0, 0, 0, 0,5);
  /* um die Länge der Animationszeilen zu löschen: */
  Überlauf: versteckt;
}

a:vor {
  Inhalt: "";
  Position: absolut;
  oben: 2px;
  links: 2px;
  unten: 2px;
  Breite: 50%;
  Hintergrund: rgba(255, 255, 255, 0,05);
}

ein span:n-tes-Kind(1) {
  Position: absolut;
  oben: 0;
  links: 0;
  Breite: 100 %;
  Höhe: 2px;
  Hintergrund: linearer Farbverlauf (nach rechts, #035f3c, #16f03a);
  Animation: Animate1 2s linear unendlich;
  -webkit-animation: animate1 2s linear unendlich;
}

@keyframes animieren1 {
  0% {
    transformieren: übersetzenX(-100%);
    -webkit-transform: übersetzenX(-100%);
    -moz-transform: übersetzenX(-100%);
    -ms-transform: übersetzenX(-100%);
    -o-transform: übersetzeX(-100%);
  }
  100 % {
    transformieren: übersetzenX(100%);
    -webkit-transform: übersetzenX(100%);
    -moz-transform: übersetzeX(100%);
    -ms-transform: übersetzenX(100%);
    -o-transform: übersetzeX(100%);
  }
}

ein span:n-tes-Kind(2) {
  Position: absolut;
  oben: 0;
  rechts: 0;
  Breite: 2px;
  Höhe: 100%;
  Hintergrund: linearer Farbverlauf (nach unten, #035f3c, #16f03a);
  Animation: Animate2 2s linear unendlich;
  -webkit-animation: animate2 2s linear unendlich;
  /* Verzögerung hinzufügen, um Kontinuität zu erzielen*/
  Animationsverzögerung: 1 s;
}

@keyframes animate2 {
  0% {
    transformieren: verschiebeY(-100%);
    -webkit-transform: übersetzeY(-100%);
    -moz-transform: übersetzeY(-100%);
    -ms-transform: übersetzenY(-100%);
    -o-transform: übersetzeY(-100%);
  }
  100 % {
    transformieren: übersetzenY(100%);
    -webkit-transform: übersetzenX(100%);
    -moz-transform: übersetzeX(100%);
    -ms-transform: übersetzenX(100%);
    -o-transform: übersetzeX(100%);
  }
}

ein span:n-tes-Kind(3) {
  Position: absolut;
  unten: 0;
  rechts: 0;
  Breite: 100 %;
  Höhe: 2px;
  Hintergrund: linearer Farbverlauf (nach links, #035f3c, #16f03a);
  Animation: Animate3 2s linear unendlich;
  -webkit-animation: animate3 2s linear unendlich;
}

@keyframes animate3 {
  0% {
    transformieren: übersetzenX(100%);
    -webkit-transform: übersetzenX(100%);
    -moz-transform: übersetzeX(100%);
    -ms-transform: übersetzenX(100%);
    -o-transform: übersetzeX(100%);
  }
  100 % {
    transformieren: übersetzenX(-100%);
    -webkit-transform: übersetzenX(-100%);
    -moz-transform: übersetzenX(-100%);
    -ms-transform: übersetzenX(-100%);
    -o-transform: übersetzeX(-100%);
  }
}

ein span:n-tes-Kind(4) {
  Position: absolut;
  oben: 0;
  links: 0;
  Breite: 2px;
  Höhe: 100%;
  Hintergrund: linearer Farbverlauf (nach oben, #035f3c, #16f03a);
  Animation: Animate4 2s linear unendlich;
  -webkit-animation: animate4 2s linear unendlich;
  /* Verzögerung hinzufügen, um Kontinuität zu erzielen*/
  Animationsverzögerung: 1 s;
}

@keyframes animate4 {
  0% {
    transformieren: übersetzenY(100%);
    -webkit-transform: übersetzeY(100%);
    -moz-transform: übersetzeY(100%);
    -ms-transform: übersetzeY(100%);
    -o-transform: übersetzeY(100%);
  }
  100 % {
    transformieren: verschiebeY(-100%);
    -webkit-transform: übersetzeY(-100%);
    -moz-transform: übersetzeY(-100%);
    -ms-transform: übersetzenY(-100%);
    -o-transform: übersetzeY(-100%);
  }
}