HTML/CSS не проигрывать анимацию для внутреннего класса

#html #css

допустим есть div который при помощи анимации CSS "крутится" без остановки. Внутри
него есть div с текстом который так же крутится. Возможно ли сделать так чтобы дочерний
div "стоял" на месте и был исключен из анимации при помощи CSS?
    

Ответы

Ответ 1

Вариант с использованием псевдоэлемента

Пример



*{
	box-sizing: border-box;
}

.circle{
	width: 100px;
	height: 100px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;	
	position: relative;	
}
.circle:before{
	content: '';
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
	border: 2px solid #ccc;
	border-right-color: #f00;
	border-radius: 50%;
	animation: rotate 1s linear infinite;
}
@keyframes rotate{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

	

		Text
	



Ответ 2

Можно задать дочернему элементу аналогичное кручение в обратную сторону - тогда будет
казаться, что он стоит на месте:



div {
  width: 100px;
  height: 70px;
  border: 1px solid black;
  padding: 30px;
  margin: 50px;
  text-align: center;
  animation: rotatediv 5s linear infinite;
}

p {
  animation: rotatep 5s linear infinite;
}

@keyframes rotatediv {
  from { transform: rotate(0deg);}
  to { transform: rotate(360deg); }
}

@keyframes rotatep {
  from { transform: rotate(0deg);}
  to { transform: rotate(-360deg); }
}


текст внутри дива