如何从左到右动画滑入式文本

Question

我已经有一个从右侧向左侧滑动的滑动文字，但我没有成功将其从左到右侧侧

所以<h1>从右侧滑入并向左侧移动。并且<h2>应该从左侧滑入并向右滑动。文本应保留在屏幕的右侧。同时播放动画。

h1 {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  -moz-animation-name: slidein-left;
  -webkit-animation-name: slidein-left;
}

@-moz-keyframes slidein-left {
  from {
    margin-left: 100%;
    width: 300%
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

@-webkit-keyframes slidein-left {
  from {
    margin-left: 100%;
    width: 300%
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

h2 {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  -moz-animation-name: slidein-right;
  -webkit-animation-name: slidein-right;
}

@-moz-keyframes slidein-right {
  from {
    margin-right: 100%;
    width: 300%
  }
  to {
    margin-right: 0%;
    width: 100%;
  }
}

@-webkit-keyframes slidein-right {
  from {
    margin-right: 100%;
    width: 300%
  }
  to {
    margin-right: 0%;
    width: 100%;
  }
}

<h1>I come from the right side</h1>
<h2 style="padding-right: 0px;">I come from the left side</h2>

我怎样才能做到这一点？
JSFiddle

Answer 1

将width设置为100%。 text-align: right你想要的那个在右边。

＆＃13;

＆＃13;

body {
  margin: 0;
}

h1,
h2 {
  width: 100%;
}

h1 {
  animation: right_to_left 3s ease;
}

h2 {
  text-align: right;
  animation: left_to_right 3s ease;
}

@keyframes right_to_left {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0;
  }
}

@keyframes left_to_right {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}

＆＃13;

<h1>I come from the right side</h1>
<h2>I come from the left side</h2>

＆＃13;

＆＃13;

＆＃13;

Answer 2

或者使用jQuery和Css：

JS：

$(document).ready(function(){
$("h1").css("margin-left", "10px");
$("h2").css("margin-left", ($("body").width() - $("h2").width()) + "px");

}）;

CSS：

    body
 {
     overflow:hidden;
 }

 h1 {

       margin-left:4000px;
       white-space:nowrap;
       transition: margin 3s;
  }

  h2 {

       margin-left:-400px;
       width:400px;
       text-align:right;
       white-space:nowrap;
       transition: margin 3s;
  }

HTML

<h1>I come from the right side</h1>
<h2>I come from the left side</h2>

小提琴：jsfiddle.net/rs8dco4g/8/

文字保留在右侧/左侧。

希望这有帮助

Answer 3

嗯，通常不建议使用边距来制作动画。对于css动画，您可以使用转换和转换属性。

以下是使用转换的方法。

<强> 的CSS：

@keyframes slidein-left {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes slidein-right {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

h1 {  
    animation: 3s slidein-right;
}

h2 {  
    animation: 3s slidein-left;
}

<强> HTML：

<h1>I come from the right side</h1>
<h2>I come from the left side</h2>

这是小提琴：Fiddle

希望有所帮助:)