Как зафиксировать анимацию цсс?

Question

[L1nw0od]

Доброго времени суток, есть изображения которое должно выехать с левого блока и зафиксироваться!
как в цсс сделать это при наведении на блок я знаю, а как сделать так чтоб когда я навел на тот блок анимация выехала и зафиксировалась на постоянно! Чтоб когда убрал мышку она осталась там ?
---

<style>
.section1 .section1-img{
position: absolute;
    top: 40px;
    left: -500px;
    transition: 1s;
}
.section1:hover .section1-img{

    transition: 1.3s;
    left: 0;
}

</style>

Answer 1

[Gortyser]

Вообще-то у анимаций есть такая полезная фича как animation-fill-mode. Должна помочь.

Comments

[Степан Крапивин]

Расскажите как без js сделать чтобы после того как курсор убрали с элемента анимация осталась на последнем кадре?

https://jsfiddle.net/CoderXevin/yk2kdngv/14/

[L1nw0od]

Степан, Также эта штука интересует!

[L1nw0od]

Степан, Лови

*demo*/
.demo {
  border-top: 100px solid #ccc;
  height: 300px;
  font-family: sans-serif;
}
@keyframes grow {
    0% { position: absolute;
        left: -500px }
    100% { position: absolute;
        left: 0}
}
@-webkit-keyframes grow {
    0% { left: -500px }
    100% { left: 0}
}
.demo:hover .grows {
    animation-name: grow;
    animation-duration: 3s;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
}
growsandstays {
    position: absolute;
    left: -500px;
}
.growsandstays {
    animation-name: grow;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
}

Answer 2

[ink]

либо на js добавить class в котором это будет написано (не hover)
css это делать не умеет ...
или input + label

Comments

[L1nw0od]

можно какой-то пример на  js как это реализовать - то что я без понятия (

[ink]

L1nw0od, по click toggleClass("новый класс"); читайте доки .. там всё написано ... не вижу смысла банальщину пересказывать