Добрый день уважаемые. Вот возник такой вопрос есть ли возможность отменить анимацию для элемента с выбранным классом. Приведу пример
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
#field {
position: relative;
margin-top: 2%;
width: 1200px;
height: 500px;
margin: 2%;
border: 1px solid black;
}
.square {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
z-index: 2;
}
.Circle {
position: absolute;
top: 15%;
left: 15%;
width: 350px;
height: 350px;
background: none;
z-index: 1;
border: 1px solid black;
animation: none;
}
.ggg > div:nth-child(1) {top:0;
left:41%;}
.ggg > div:nth-child(2) {top:15%;
left:77%;}
.ggg > div:nth-child(3) {top:65%;
left:77%;}
.ggg > div:nth-child(4) {top:65%;
left:5%;}
.ggg > div:nth-child(5) {top:15%;
left:5%;}
.ggg {
position: relative;
width: 500px;
height: 500px;
transform-origin: center;
border: 1px solid black;
animation: Circling 4s linear infinite;
}
@keyframes Circling {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)}
}
.ggg > div {
animation: Circling 4s linear infinite reverse;
}
</style>
<body>
<div id="field">
<div class="ggg">
<div class="square moveCircling"></div>
<div class="square moveCircling"></div>
<div class="square moveCircling"></div>
<div class="square moveCircling"></div>
<div class="square moveCircling"></div>
<div class="square moveCircling Circle"></div>
</div>
</div>
</body>
</html>
Цель такова - что б у элемента с классом Circle не применялась ни какая анимация ( свойство animation: игнорировалось)
Я побывал писать исключающую выборку .ggg > div:not(.Circle), и так задавать анимацию, но она мне не подошла. Элемент с классом, всё равно продолжает вертеться. Пробывал прописывать в классе .Circle {
animation: none} оно тоже не сработало
Пример довольно некрасивый, в оригинале класс .Circle присваиваться через JavaScript и меняет своего хозяина.
Дело в том что изначально, на момент загрузки, в DOM дереве нету дива с классом .Circle . И вся система сидит без анимации. Дальше пользователь нажимает на один из элементов class="square" и этому элементу добавляется класс .Circle а его родителю класс с анимацией. И пошла каруселька. Вот.