Элемент качается CSS
Я сделал сердечко с помощью CSS и заставил его менять размер, становиться маленьким - большим каждую секунду, как обычно. Но я заметил это странное колебание, которое я действительно не вставлял и на которое действительно больно смотреть. Мне известно о нескольких возможных повторяющихся вопросах, но они мне не помогли. Вот рабочий пример.
html,
body,
.container {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.heart {
display: flex;
justify-content: center;
align-items: center;
background-color: red;
transform: rotate(-45deg);
transform-style: preserve-3d;
animation: growMain 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.heart:after,
.heart:before {
background-color: red;
content: "";
border-radius: 50%;
position: absolute;
transform: translateZ(-1px);
}
.heart:after {
animation: growAfter 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.heart:before {
animation: growBefore 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes growMain {
from {
width: 50px;
height: 50px;
}
to {
width: 80px;
height: 80px;
}
}
@keyframes growAfter {
from {
left: 25px;
width: 50px;
height: 50px;
}
to {
left: 40px;
width: 80px;
height: 80px;
}
}
@keyframes growBefore {
from {
top: -25px;
width: 50px;
height: 50px;
}
to {
top: -40px;
width: 80px;
height: 80px;
}
}
.inner {
display: initial;
transform: rotate(45deg);
}
.text {
text-align: center;
color: white;
font-family: "Comic Sans MS";
font-size: 100%;
margin: 0;
}<div class = "container">
<div class = "heart">
<div class = "inner">
<p class = "text">Some text</p>
</div>
</div>
</div>Он трясется как сумасшедший @DogukanCavus, по крайней мере, в Opera и Chrome, даже если я не написал этого в своем коде. Может, в других браузерах этого не происходит
«... даже если я не написал этого в своем коде» - лучший совет, который я действительно могу дать, - это всегда описывать свою проблему в своем вопросе, иначе как мы должны помочь?
@DavidThomas. Я сделал именно это, но как я могу узнать, повторяется ли проблема и в вашем браузере. Как я уже сказал, сердце колышется, чуть-чуть, но это видно, а смотреть на него больно.
@ A.Meshu не совсем то, чем я хочу заниматься
Ответы 1
Анимация фактической ширины / высоты / положения, как правило, не очень хорошо работает, особенно при одновременном выполнении нескольких анимаций, как вы здесь. Перемещение / изменение размера элементов с помощью transform, как правило, работает лучше.
В этом случае я бы рекомендовал установить начальный размер вашего сердца, а затем использовать преобразование scale для создания эффекта пульса. При таком подходе вы также получаете дополнительное преимущество перехода от трех анимаций к одной, что проще для браузера, и вам не нужно беспокоиться о их синхронизации.
Чтобы текст не сжимался вместе с сердечком, вы можете обернуть его оберткой и расположить текст по центру обертки над сердечком. Тогда просто трансформируйте само сердце, а не обертку. (Или, если вы хотите, чтобы текст уменьшался вместе с сердцем, сохраните ту же структуру HTML, что и сейчас.)
html,
body,
.container {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.heart-wrapper {
position: relative;
width: 80px;
height: 80px;
}
.heart {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: red;
transform: rotate(-45deg) scale(1);
transform-style: preserve-3d;
animation: pulse 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.heart::before {
left: 40px;
}
.heart::after {
top: -40px;
}
.heart::after,
.heart::before {
background-color: red;
content: "";
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
transform: translateZ(-1px);
}
@keyframes pulse {
from {
transform: rotate(-45deg) scale(1);
}
to {
transform: rotate(-45deg) scale(0.6);
}
}
.text {
position: absolute;
top: 40%; /* slightly off-center to the top, so it appears centered when the heart shrinks */
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
font-family: "Comic Sans MS";
font-size: 100%;
margin: 0;
}<div class = "container">
<div class = "heart-wrapper">
<div class = "heart"></div>
<div class = "text">some text</div>
</div>
</div>Спасибо, @ cjl750, за объяснение, почему происходит лаг и как его исправить, это то, что я искал!
что проблема?