basti1012.bplaced.net

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 <a href="https://jsfiddle.net/mvuqsj8a/11/ ">jsfiddle</a> weiß jetzt auch nicht so genau wieso aber auf meiner Website ist das smoother.

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;
}
.flip-box:hover .flip-box-inner {
  	transform:rotateY(180deg);
  	transition:transform 1s;
}
.flip-box-back {
     background-color: #262626;
     color: white;
     transform: rotateY(180deg);
     position: absolute;
     top: 0;
     left: 0;
     width:100%;
}
.flip-box:hover .flip-box-front,
.flip-box:hover .flip-box-back{
    height:190px;
    transition: height 1s 0.5s; 
}

.flip-box:not(:hover) .flip-box-front,
.flip-box:not(:hover) .flip-box-back{
    height:100px;
    transition-duration:0.5s;
    transition-delay:0.5s;
    transition-property:height;
}
.flip-box-front,
.flip-box-back {
     width: 100%;
     height: 100%;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
}


@media screen and (max-width: 700px) {
  #wrapper{
    height:600px;
    margin:0 auto;
    padding:3em 0;
  }
  #wrapper ul li{
    width:90%;
  }
  #wrapper ul li:hover > *{
    z-index:100;
    position:relative;
  }
}
</style>
<div id="wrapper">
<ul>
			<li>
			<div class="flip-box">
				<div class="flip-box-inner">
					<div class="flip-box-front">
						<img src="/image/6.png" alt="KSS SCHAFFHAUSEN">
					</div>
					<div class="flip-box-back">
						<p>Kurzbeschreibung</p>
					</div>
				</div>
			</div>
			</li>	
			<li>
			<div class="flip-box">
				<div class="flip-box-inner">
					<div class="flip-box-front">
						<img src="/image/6.png" alt="KSS SCHAFFHAUSEN">
					</div>
					<div class="flip-box-back">
						<p>Kurzbeschreibung</p>
					</div>
				</div>
			</div>
			</li>
			<li>
			<div class="flip-box">
				<div class="flip-box-inner">
					<div class="flip-box-front">
						<img src="/image/6.png">
					</div>
					<div class="flip-box-back">
						<p>Kurzbeschreibung</p>
					</div>
				</div>
			</div>
			</li>
			<li>
			<div class="flip-box">
				<div class="flip-box-inner">
					<div class="flip-box-front">
						<img src="/image/6.png">
					</div>
					<div class="flip-box-back">
						<p>Kurzbeschreibung</p>
					</div>
				</div>
			</div>
			</li>
		</ul>
</div>