如何为从左到右的滑入文本表单设置动画 [英] How to animate sliding-in text form left to right

问题描述

我已经有一个从右侧滑入左侧的滑动文本，但我没有成功使其从左侧到右侧侧>.

I already have a sliding text which slides in from the right side to the left but I do not succeed in it to make this work from the left to the right side.

所以

从右侧滑入并向左侧滑动.

应该从左侧滑入并向右滑动.文本应保留在屏幕的右侧.同时播放动画.

So the <h1> is sliding in from the right side and is going to the left. And the <h2> should slide in from the left side and going to the right. The text should stay at the right side of the screen. Play the animation at the same time.

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

How can i achieve this?
JSFiddle

推荐答案

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

Set the width to 100%. text-align: right the one you want to have on the right side.

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>

这篇关于如何为从左到右的滑入文本表单设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！