如何为从左到右的滑入文本表单设置动画

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你想在右边的那个。

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;
  }
}

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