Обратная анимация onHover

Question

Я использую анимацию для моей домашней страницы. Так как нет противоположности onHover I пробовали that:

но это действительно не работает для меня.

Смотрите, что:

https://jsfiddle.net/mus8sdL0/fiddle `

Спасибо за помощь

Answer 1

Попробуйте это ..

HTML

<section class="half"> 
    <div id="containertop"> 
    <div class="titletextup"> 
    UP 
    <br> 
    <div id="triangle-facing-top"></div> 
    </div> 
    </div> 
</section> 

<section class="half"> 
    <div class="titletextdown"> 
    <div id="triangle-facing-bottom"></div> 
    <br> 
    DOWN 
    </div> 
</section> 

CSS

@charset "UTF-8"; 
* { 
    margin: 0; padding: 0; 
} 

html, body, #container { 
    height: 100%; 
    font-family: 'corbertregular', arial, sans-serif; 
    font-size:24px; 
    color:white; 
} 
header { 
    height: 50px; 
    background: gray; 
} 
main { 
    height: calc(100% - 50px); 
    background: green; 
} 
.half { 
    height: 50%; 
    position: relative; 
} 
.half:first-child { 

    border-bottom:10px; 
    border-left:0px; 
    border-right:0px; 
    border-top:0px; 
    border-bottom-color:white; 
    border-style:solid; 
} 

#containertop { 
    background: blue; 
    height: 100%; 
} 

.half:first-child > #containertop{ 
    position:absolute; 
    z-index:1; 
    width:100%; 
    top:0px; 
    transition: 2s all ease; 
} 

.half:first-child:hover > #containertop{ 
    top: -100%; 
} 

.half:last-child { 
    background: green; 
    border-top:10px; 
    border-bottom:0px; 
    border-left:0px; 
    border-right:0px; 
    border-top-color:white; 
    border-style:solid; 
} 

.titletextup{ 
    text-align:center; 
} 

.titletextdown{ 
text-align:center; 
} 

#triangle-facing-top { 
    display: inline-block; 
    margin: 72px; 
    border-right: 24px solid; border-bottom: 24px solid; 
    width: 120px; height: 120px; 
    transform: rotate(-135deg); 
    display: inline-block; 
    -webkit-transform:rotate(-135deg); 
    -moz-transform:rotate(-135deg); 
    -o-transform:rotate(-135deg); 
    color: white; 
} 

#triangle-facing-bottom { 
    display: inline-block; 
    margin: 72px; 
    border-right: 24px solid; border-bottom: 24px solid; 
    width: 120px; height: 120px; 
    transform: rotate(45deg); 
    display: inline-block; 
    -webkit-transform:rotate(45deg); 
    -moz-transform:rotate(45deg); 
    -o-transform:rotate(45deg); 
    color:white; 
} 

Заканчивать этот Fiddle

---

Для обоих нижней и верхней animationCheck out this fiddle