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 }
}