元素摆动CSS

Question

我对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> 

Answer 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>