Von jQuery zu CSS

Von jQuery zu CSS

CSS hat mit Transitions und Animationen komplexe Animationen mit Javascript vereinfacht, und einfache Animation wie die subtilen Effekte aus jQuery kann CSS komplett und selbst ohne den Einsatz von Javascript ersetzen.

Das erspart die Ladezeit für die jQuery Library und gleichzeitig den Aufwand für die Einarbeitung in Javascript und jQuery.

18-12-15 SITEMAP

Einblenden und Vergrößern aus der Mitte

<div class="line-show">
   <input type="radio" name="fx" id="start-show" style="display:none">
   <input type="radio" name="fx" id="reset-show" style="display:none">
   <div class="show">
      <svg viewBox="0 0 100 100" width="100" height="100">
   </div>
   <label for="start-show">PLAY</label>
   <label for="reset-show">RESET</label>
</div>

Das eingeblendete Icon sitzt absolut positioniert in einem relativ positionierten Element und ist mit opacity: 0 ausgeblendet, bis die Animation angestoßen wird.

Zwei Keyframe-Animationen – show und hide – steuern das Ein- und Ausblenden des Icons.

CSS mit Keyframes
.line { 
   position: relative;
}
.show {
   width: 100px; height: 100px;
   position: absolute;
   top: 0px; right: 100px;
   opacity:0;
}

@keyframes show {
   0%   { transform: scale(0);     opacity: 0;  }
   100% { transform: scale(100px); opacity: 1;  }
}

@keyframes hide {
   0% { transform: scale(0); opacity: 0; }
}

Selbst die Buttons, die Ein- und Ausblenden bewirken, agieren mit reinem CSS und brauchen weder jQuery noch Javascript.

CSS für Play und Reset
#start-show:checked ~ .show { 
   animation: show 2s forwards;
}

#reset-show:checked ~ .show { 
   animation: hide 2s forwards;
}

Einfliegen von oben Rechts

Nur eine kleine Änderung in @keyframes show, alles andere bleibt wie zuvor.

@keyframes show {
   0%   { transform: scale(0);     opacity: 0; margin-top: -100px; margin-right: -100px }
   100% { transform: scale(100px); opacity: 1; margin-top: 0;      margin-right: 0 }
}

Damit ist auch klar, wie das Einfliegen von oben links aussieht:

@keyframes show {
   0%   { transform: scale(0);     opacity: 0; margin-top: -100px; margin-right: 100px }
   100% { transform: scale(100px); opacity: 1; margin-top: 0;      margin-right: 0 }
}

fadeIn