Title: How to prevent CSS animations from moving the rest of my page?
Tags: css;css-animations
Question: I've added an animation to a button using keyframes. The animation is supposed to result in a pulsing effect. The animation appears to be working correctly but when I add text underneath it, the animation causes the text to move also.
Here is a screenshot of the animation
The 'pulsing' text is being moved up and down as the button itself grows and shrinks.
Here is my related CSS:
**Button num 4 **/
#block-yui_3_17_2_1_1614371999436_9067 .sqs-block-button-element {
position: relative !important;
color: black !important;
background-color: orange !important;
box-shadow: 5px 10px green;
animation: demoButtonPulse 1s ease-in-out infinite;
@keyframes demoButtonPulse {
0% {padding: 1.3rem 2.171rem;;
background: red;}
50% {padding: 1.43rem 2.3881rem;;
background: green;
}
100% {padding: 1.3rem 2.171rem;;
background: red;}
#block-yui_3_17_2_1_1614371999436_9067 .sqs-block-button-element:hover {
color: white !important;
background-color: black !important;
border-color: green;
box-shadow: 5px 10px orange;
Any idea as to how I can keep the text from moving while the button pulses?

Here is the accepted answer: I believe I was able to accomplish what you want using scale instead of padding in your keyframes:
.sqs-block-button-element{
position: relative !important;
padding: 10px;
margin-bottom: 2rem;
color: black !important;
background-color: orange !important;
box-shadow: 5px 10px green;
animation: demoButtonPulse 1s ease-in-out infinite;
@keyframes demoButtonPulse {
0% {transform: scale(1);}
50% {transform: scale(1.2);}
100% {transform: scale(1);}
.sqs-block-button-element:hover {
color: white !important;
background-color: black !important;
border-color: green;
box-shadow: 5px 10px orange;
<main&gt;
<button type="submit" class="sqs-block-button-element"&gt;
Call to Action
</button&gt;
<div&gt;pulsing</div&gt;
</main&gt;
The other solution would be to wrap the button in a div and give the div a fixed height:
.sqs-block-button-element{
position: relative !important;
padding: 10px;
margin-bottom: 2rem;
color: black !important;
background-color: orange !important;
box-shadow: 5px 10px green;
animation: demoButtonPulse 1s ease-in-out infinite;
.button-height {
height: 100px;
@keyframes demoButtonPulse {
0% {padding: 1.3rem 2.171rem;;
background: red;}
50% {padding: 1.43rem 2.3881rem;;
background: green;
}
100% {padding: 1.3rem 2.171rem;;
background: red;}
/* @keyframes demoButtonPulse {
0% {transform: scale(1);}
50% {transform: scale(1.2);}
100% {transform: scale(1);}
} */
.sqs-block-button-element:hover {
color: white !important;
background-color: black !important;
border-color: green;
box-shadow: 5px 10px orange;
<main&gt;
<div class="button-height"&gt;
<button type="submit" class="sqs-block-button-element"&gt;
Call to Action
</button&gt;
</div&gt;
<div&gt;pulsing</div&gt;
</main&gt;


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:03/01/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<css><css-animations>', 'Title': 'How to prevent CSS animations from moving the rest of my page?', 'ViewCount': 404, 'id': 66424756, 'user_AboutMe': None, 'user_AccountId': 16615403.0, 'user_DisplayName': 'Ben', 'user_Reputation': 125.0, 'user_Views': 29.0, 'user_id': 12007229.0}}