我想使用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">