When you click a window pops up, the window crashes, but then again comes to the place

@keyframes blocks-main { 0%{ top: -625px; } 40%{ top: -625px; } 70%{ top: -625px; } 100%{ top: 0; } }

animation settings

 animation: blocks-main .5s;

The animation loses once, reaches 100% and again to zero, and the block goes away, because top:-625px; How to make the animation stop at 100%?

    3 answers 3

    The obvious way:

    In css:

     blocks-main-visible{top:0};

    In the click handler:

     this.className='ваш_класс_с_анимацией blocks-main-visible'

    Perhaps there are more ways.

       @keyframes blocks-main { 0%{ top: -625px; } 40%{ top: -625px; } 70%{ top: -625px; } 100%{ top: 0; } } div { animation: blocks-main .5s; }

      add to the end: forwards

       div { animation: blocks-main .5s forwards; } 
         -webkit-animation-fill-mode:both; animation-fill-mode:both;