如何解决我想使用CSS for WordPress从左到右制作一些文本动画
我想为从左到右的文本添加动画效果,文本显示为“订单满49欧元免费送货”。如何为该文本编写代码?我想把它放在中间。
这是我尝试过的代码,但我不希望这种反向动画和速度必须更快。
#pot {
bottom: 15%;
display: block;
position: absolute;
animation: linear infinite alternate;
animation-name: run;
animation-duration: 2s;
}
@-webkit-keyframes run {
0% {
left: 0;
transform: translateX(0);
}
100% {
left: 100%;
transform: translateX(-100%);
}
}
<img id="pot" src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="100px" height="100px" />
<img id="pot" src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="100px" height="100px"
解决方法
目前您正在使用infinite
,它将永久循环播放动画。所以删除它。为了加快动画的速度,您可以降低animation-duration
的值。并且要确保元素的位置在动画结束时不会重置,请使用animation-fill-mode: forwards;
。您还可以设置animation-timing-function
使整个过程更加顺畅。
您可以将所有这些组合成一行CSS:animation: ease 0.3s forwards;
#pot {
bottom: 15%;
display: block;
position: absolute;
animation: ease 0.3s forwards;
animation-name: run;
}
@-webkit-keyframes run {
0% {
left: 0;
}
100% {
left: 100%;
transform: translateX(-100%);
}
}
<img id="pot" src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="100px" height="100px">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。