CSS анимация при наведении курсора - пауза после завершения - PullRequest
Новая
       6

CSS анимация при наведении курсора - пауза после завершения

0 голосов
/ 04 декабря 2018

У меня есть div над изображением, и я хотел бы изменить его положение с помощью анимации css с верха изображения до нижнего (вызвано при наведении курсора) и остаться на дне с его новым значением после анимации(Я стараюсь не использовать jQuery).

Итак, пока я запускаю анимацию, когда она зависла, а когда нет, она приостановлена.и с режимом animation-fill-mode: forward, он работает, единственное, что мне нужно держать курсор для завершения анимации.мой код: 

 <div class="home-posts-section">
        <div class="home-posts-top-content">
            <img src="images/worldmap.jpg" >
                <div class="uael-post__content-wrap">
                    <h1>some content</h1>
                        <p>some more content</p>
                </div>
        </div>
    </div>


   .home-posts-top-content{
width:400px;
height:400px;
position:relative;
z-index:1;
}

.home-posts-top-content img{
width:100%;
height:100%;
}

.uael-post__content-wrap{
    width:90%;
    margin:0 auto;
    ;
    background-color: rgba(255,255,255,0.9);
    position:absolute;
    top:25px;
}



.home-posts-section .home-posts-top-content .uael-post__content-wrap{
 -webkit-animation: scroll_to_bottom 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: scroll_to_bottom 2s; /* Firefox < 16 */
-ms-animation: scroll_to_bottom 2s; /* Internet Explorer */
 -o-animation: scroll_to_bottom 2s; /* Opera < 12.1 */
animation: scroll_to_bottom 2s;
   -webkit-animation-play-state:paused;
-webkit-animation-fill-mode: forwards;
}

.home-posts-section .home-posts-top-content .uael-post__content-wrap:hover{
     -webkit-animation-play-state:running;  

}


@keyframes scroll_to_top {
    from { top: 258px; }
    to   { top: 25px; }
    }

/* Firefox < 16 */
@-moz-keyframes scroll_to_top {
    from { top: 258px; }
    to   { top: 25px; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes scroll_to_top {
    from { top: 258px; }
    to   { top: 25px; }
}

Я пытаюсь найти способ, где div меняет свою позицию при наведении курсора и остается там.Спасибо

1 Ответ

0 голосов
/ 05 декабря 2018

вы можете использовать houve css для обновления позиции div, как в этом примере 

.uael-post__content-wrap:hover{
  //do what ever you want 
}
...