如何防止 CSS 动画移动我页面的其余部分?
How to prevent CSS animations from moving the rest of my page?
我使用关键帧向按钮添加了动画。动画应该会产生脉冲效果。动画似乎工作正常,但当我在其下方添加文本时,动画也会导致文本移动。
这是动画截图
'pulsing' 文本随着按钮本身的增大和缩小而上下移动。
这是我的相关 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;
}
知道如何在按钮闪烁时防止文本移动吗?
我相信我能够在关键帧中使用缩放而不是填充来完成您想要的:
.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>
<button type="submit" class="sqs-block-button-element">
Call to Action
</button>
<div>pulsing</div>
</main>
另一个解决方案是将 button
包裹在 div
中并给 div
一个固定的高度:
.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>
<div class="button-height">
<button type="submit" class="sqs-block-button-element">
Call to Action
</button>
</div>
<div>pulsing</div>
</main>
我使用关键帧向按钮添加了动画。动画应该会产生脉冲效果。动画似乎工作正常,但当我在其下方添加文本时,动画也会导致文本移动。
这是动画截图
'pulsing' 文本随着按钮本身的增大和缩小而上下移动。
这是我的相关 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;
}
知道如何在按钮闪烁时防止文本移动吗?
我相信我能够在关键帧中使用缩放而不是填充来完成您想要的:
.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>
<button type="submit" class="sqs-block-button-element">
Call to Action
</button>
<div>pulsing</div>
</main>
另一个解决方案是将 button
包裹在 div
中并给 div
一个固定的高度:
.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>
<div class="button-height">
<button type="submit" class="sqs-block-button-element">
Call to Action
</button>
</div>
<div>pulsing</div>
</main>