So animieren Sie den Einschiebetext von links nach rechts

Question

Ich habe bereits einen Gleittext, der von rechts nach links geschoben wird, aber es gelingt mir nicht, das von der links rechts zu machen Seite.

So ist die <h1> von der rechten Seite einschieben und geht nach links. Und die <h2> sollte von der linken Seite nach rechts schieben. Der Text sollte auf der rechten Seite des Bildschirms bleiben. Spielen Sie die Animation gleichzeitig ab.

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>

Wie kann ich das erreichen?
JSFiddle

Answer 1

Stellen Sie den width-100%. text-align: right der, den Sie auf der rechten Seite haben wollen.

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>

Answer 2

Oder mit jQuery und Css wie folgt aus:

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> 

Fiddle: jsfiddle.net/rs8dco4g/8/

Der Text bleibt auf der rechten/linken Seite.

hoffe, das hilft

Answer 3

Nun, es ist nicht allgemein empfohlen Margen zu verwenden, zu animieren. Für CSS-Animationen können Sie Eigenschaften für Transformieren und Übersetzen verwenden.

Hier ist, wie Sie es mit der Transformation tun können.

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> 

Hier ist die Geige: Fiddle

es Hoffnung hilft :)