Problem mit animate.css

[MrMurphy1]

Hallo,

die Seite enthält leider einige sachliche Fehler im Quelltext. Ich habe nicht geprüft in wie weit die die Animation stören können.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fneu.cedo-beratung.ch%2F

Zu deinem Problem

Ich habe mich im folgenden Beispiel an das vorhandene CSS von animate.css gehalten, obwohl ich es ziemlich sperrig finde. Füge deinem CSS folgende Anweisungen hinzu:

.animated1 {
   -webkit-animation-duration: 16s;
   animation-duration: 16s;            
   -webkit-animation-delay: 0s;
   animation-delay: 0s;
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
   -webkit-animation-direction: alternate;
   animation-direction: alternate;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}
@-webkit-keyframes zoomIn1 {
   from {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
   }
   12% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
   25% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
   }
   75% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
   }
   100% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
}
@keyframes zoomIn1 {
   from {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
   }
   12% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
   25% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
   }
   75% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
   }
   100% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
}
.zoomIn1 {
   -webkit-animation-name: zoomIn1;
   animation-name: zoomIn1;
}
.animated2 {
   -webkit-animation-duration: 4s; /* Dauer der Animation */
   animation-duration: 4s;            
   -webkit-animation-delay: 4s;    /* Startverzögerung */
   animation-delay: 4s;
   -webkit-animation-iteration-count: 2;
   animation-iteration-count: 2;
   -webkit-animation-direction: alternate;
   animation-direction: alternate;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}
@-webkit-keyframes zoomIn2 {
   from {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
   }
   40% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
   50% {
      opacity: 1;
   }
}
@keyframes zoomIn2 {
   from {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
   }
   40% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
   50% {
      opacity: 1;
   }
}
.zoomIn2 {
   -webkit-animation-name: zoomIn2;
   animation-name: zoomIn2;
}

Dem ersten Bild bzw. dessen Container gibst du dann die Klassen "animated1 zoomIn1", dem zweiten Bild bzw. dessen Container die Klassen "animated2 zoomIn2".

Die Bilder müssen so positioniert werden, dass sie übereinander erscheinen können. Dazu bietet sich "position: absolute;" an.

Gruss

MrMurphy