Как сохранить состояние после transition-duration?

Question

[MrZed]

Привет! Как сохранить состояние элемента после transition-duration?

HTML

<div>
    <button class="theme"><br></button>
 </div>

CSS

.theme{
    border: none;
    width: 350px;
    height: 350px;
    background-color: yellow;
    border-radius: 1000px;
    transition-duration: 1s;
}

.theme:hover{
    background-color: black;
}

Comments

[Вадим]

Не убирать курсор с элемента :-)
Вы вешаете анимацию на событие наведения указателя на элемент, соответственно, когда курсор уходит с элемента - состояние меняется обратно.
Если Вы хотите чтобы произошла анимация при наведении курсора и она при этом сохранилась как конечное состояние, то тут нужно через js добавлять класс элементу, а в классе описывать конечное состояние, в вашем случае типа так:

.theme {
  background-color: yellow
}
.theme.active {
  background-color: black
}