CODEWITHSUNDEEP
htmlcss
DDay
DDay

Reputation: 100

text animation in html

I have two paragraphs with text in it. i want to animate this text. what i actually want is to move first paragraph from left on x-axis and second paragraph from right to left.

my code is working only for one direction either left or right.

here:

<!DOCTYPE html>
<html>
<head>
<style> 

#text {
         position:relative;
         -webkit-animation: mymove infinite; /* Chrome, Safari, Opera */
         -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
         animation: mymove infinite;
         animation-duration: 2s;
      }

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
         from {top: 200px;}
         to {top: 0px;}
      }

@keyframes mymove {
         from {top: 0px;}
         to {top: 100px;}
      }

#text1 {
         position:relative;
         -webkit-animation: mymove infinite; /* Chrome, Safari, Opera */
         -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
         animation: mymove infinite;
         animation-duration: 2s;
       }

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
         from {right: -200px;}
         to {right: 0px;}
       }

@keyframes mymove {
         from {top: 0px;}
         to {top: 100px;}
       }

</style>
</head>
<body>
      <p id="text">Some text goes here</p>
      <p id="text1">text display animation</p>
</body>
</html>

i want to move second paragraph from right to left and first one from left to right. what could be the possible solution?

Upvotes: 1

Views: 1190

Answers (2)

himanshu
himanshu

Reputation: 1797

DEMO

#text {
         position:relative;
         -webkit-animation: mymove infinite; /* Chrome, Safari, Opera */
         -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
         animation: mymove infinite;
         animation-duration: 2s;
      }

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
         from {left: 200px;}
         to {left: 0px;}
      }

@keyframes mymove {
         from {left: 200px;}
         to {left: 0px;}
      }

#text1 {
         position:relative;
         -webkit-animation: mymove1 infinite; /* Chrome, Safari, Opera */
         -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
         animation: mymove1 infinite;
         animation-duration: 2s;
       }

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove1 {
         from {right: 200px;}
         to {right: 0px;}
       }

@keyframes mymove1 {
         from {right: 200px;}
         to {right: 0px;}
       }

Upvotes: 2

AtanuCSE
AtanuCSE

Reputation: 8940

inside #text in css add

-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-direction: reverse;

http://jsfiddle.net/sxscmhy7/

Upvotes: 1

Related Questions