反向显示动画的文字

Question

我正在尝试使用css3及其动画和关键帧系统，但我已经没有想法让它工作了......

我依赖于我在codepen上找到的this animation，我希望扭转文本的显示（'Escape'向右移动，'进入惊人的体验'从右向左显示）

这是CSS：

body {
    text-align:center;
    background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
    color:#555;
    font-family:'Roboto';
    font-weight:300;
    font-size:32px;
    padding-top:40vh;
    height:100vh;
    overflow:hidden;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translate3d(0,0,0);
}

div {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
}

div:first-of-type {    
  animation: showup 7s infinite;
}

div:last-of-type {
  width:0px;
  animation: reveal 7s infinite;
}

div:last-of-type span {
  margin-left:-355px;
  animation: slidein 7s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:0;width:355px;}
}

我尝试了很多东西，比如添加浮动，边距，显示或编辑关键帧，但没有做任何工作。这个动画中唯一值得注意的变化是宽度div，所以我不知道如何让它在相反的情况下工作。

希望有人可以帮助我！

Answer 1

这可能会有所帮助

body {
  text-align: center;
  background: linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
  color:#555;
  font-weight: 300;
  font-size: 32px;
  padding-top: 40vh;
  height: 100vh;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

div {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-size: 30px;
  line-height: 1.5;
}


div.lr {
  width: 0px;
  animation: reveal 7s infinite;
}

div.rl {    
    animation: showup 7s infinite;
}

div.rl span {
  margin-left: -355px;
  animation: slidein 7s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width: 375px;}
    80% {opacity:1;}
    100% {opacity:0;width: 375px;}
}

<div class="lr"> 
  <span>into amazing experiences</span>
</div>
<div class="rl">Escape</div> 

Answer 2

你只需要指定animation-direction并将其设置为reverse。 See more关于动画方向属性。这是带有反转动画的codepen。