Запускать анимацию для элемента с использованием только чистого CSS с назначенным ключевым кадром - PullRequest
Новая
       103

Запускать анимацию для элемента с использованием только чистого CSS с назначенным ключевым кадром

0 голосов
/ 08 мая 2020

Я хочу, чтобы анимация запускалась при щелчке элемента только с использованием чистого css. Я уже назначил ключевой кадр этому контейнеру класса . Существует тег . Когда я щелкаю по нему, начинается анимация контейнера . Можно ли без использования jquery? Проще говоря, при нажатии кнопки анимация запускается с назначенным ключевым кадром.

HTML 

<div class="container container-anim">
   <div class="psw align-self-center">
       <a style="color:maroon" href="#reset">Back to log-in page</a> 
   </div>
</div>

CSS

.container-anim {    
animation-name: stretch;    
animation-duration: 1.5s; 
animation-iteration-count: infinite;

}

@keyframes stretch {
0% {transform: scale(1);}
50%{ }
100%{transform: scale(1.2);}

}

Ответы [ 2 ]

1 голос
/ 08 мая 2020

Я не знаю, как запустить анимацию без использования какого-то типа JS для присоединения класса к элементу div.

Я бы просто использовал onclick и jquery (или vanilla js) 

<div class="container" onclick="$('.container').addClass('container-anim');">
   <div class="psw align-self-center">
       <a style="color:maroon" href="#reset">Back to log-in page</a> 
   </div>
</div>
0 голосов
/ 08 мая 2020

Подход, который вы можете попробовать, - использовать псевдокласс :active , он воспроизводит вашу анимацию, когда вы нажимаете на любой элемент. так: 

.container-anim:active {    
animation-name: stretch;    
animation-duration: 1.5s; 
animation-iteration-count: infinite;

}

@keyframes stretch {
0% {transform: scale(1);}
50%{ }
100%{transform: scale(1.2);}
}
<div class="container container-anim">
   <div class="psw align-self-center">
       <a class="a" style="color:maroon" href="#reset">Back to log-in page</a> 
   </div>
   </div>
...