Transition und Keyframes
Hayo.
Ich beschäftige mich gerade mit Transition und keyframes.
Auf meiner Website habe ich gerade eine kleine Animation in arbeit. aussehen sollte das am ende etwa so:
die Maus geht auf das logo dieses dreht sich und der text bereich wächst etwas und der text erscheint. Diesen Teil habe ich bereits geschafft.
Wen die Maus nun wider sich entfernt sollte sich der text erst einklappen und dann zurück drehen. Diesen Teil noch nicht
Ich dachte mir vlt. wäre es mit delay möglich wie beim aktivieren des hovers aber halt rückwärts.
Und vielleicht hat jemand noch ne Idee wie ich es schaffe das sich die anderen in dem wrapper befindenden divs sich nicht dann neu ausrichten (zusehen auf der Website)
Hier mein jsfiddle weiß jetzt auch nicht so genau wieso aber auf meiner Website ist das smoother.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<style>
#wrapper{
margin: 4em auto 0 auto;
width:100%;
display:flex;
height:450px;
background:lightgreen;
}
#wrapper ul{
margin: 0px auto;
padding: 1em 0;
list-style: none;
display: flex;
justify-content:space-around;
display:flex;
flex-wrap:wrap;
font-size: 1.5em;
}
#wrapper ul li{
display:block;
height:auto;
width:45%;
min-height:95px;
align-content:space-around;
}
.flip-box {
background:transparent;
perspective: 1000px;
}
.flip-box-inner {
position:relative;
width:100%;
height:100%;
text-align:center;
transform-style: preserve-3d;
transition:height 0.5s 1s, transform 1s 1s;