Made the animation on the hover. I can not achieve the same reverse animation when the cursor leaves the block. What are the options? Specifically, this example is the simplified part of a more complex animation for understanding the algorithm. Therefore, implementation is needed precisely through animation .

 .view { width: 300px; height: 200px; overflow: hidden; position: relative; border: 1px solid #000000; } .view .mask { width: 300px; height: 200px; position: absolute; overflow: hidden; top: -100px; left: 0; background-color: rgba(255, 255, 255, 0.7); transition: all 0.3s ease-out 0.5s; } .view:hover .mask { animation: swipe 0.5s linear; animation-fill-mode: both; } .view h2 { color: #fff; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0; } @keyframes swipe { 0% { top: -100px; } 100% { top: 0; } } 
 <div class="view"> <div class="mask"> <h2>Hover Style</h2> </div> </div>

    1 answer 1

    For example, like this

     .view { width: 300px; height: 200px; overflow: hidden; position: relative; border: 1px solid #000000; } .view .mask { width: 300px; height: 200px; position: absolute; overflow: hidden; top: -100px; left: 0; background-color: rgba(255, 255, 255, 0.7); transition: all 0.3s ease-out 0.5s; } .view:hover .mask { animation: swipe 0.5s linear; animation-fill-mode: both; } .view:not(:hover) .mask { animation: swipe-out 0.5s linear; animation-fill-mode: both; } .view h2 { color: #fff; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0; } @keyframes swipe { 0% { top: -100px; } 100% { top: 0; } } @keyframes swipe-out { 0% { top: 0; } 100% { top: -100px; } } 
     <div class="view"> <div class="mask"> <h2>Hover Style</h2> </div> </div>