Reverse Animation of onHover

Question

I am using CSS Animation for my Homepage. Since there is no opposite of onHover I have tried that:

but it does not really work for me.

See that:

fiddlehttps://jsfiddle.net/mus8sdL0/`

Thanks for help

Answer 1

Try this..

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

Check out this Fiddle

---

For both bottom and top animation Check out this fiddle