CODEWITHSUNDEEP
htmlcsscss-animations
Jack Maessen
Jack Maessen

Reputation: 1864

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>

How can i achieve this?
JSFiddle

Upvotes: 1

Views: 28936

Answers (3)

user3589620
user3589620

Reputation:

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>

Upvotes: 7

Nimeshka Srimal
Nimeshka Srimal

Reputation: 8920

Well, it's not generally recommended to use margins to animate. For css animations, you can use transform and translate properties.

Here's how you can do it using transform.

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>

Here's the fiddle : Fiddle

Hope it helps :)

Upvotes: 4

WilliWespe
WilliWespe

Reputation: 117

Or with jQuery and Css like this:

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/

The text stays on the right/left side.

Hope this helps

Upvotes: 0

Related Questions