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