Jump to content

Using CSS Animation and Transitions for <marquee> tag


Recommended Posts

Hi there! I'm new! Got my first qustion.

 

I originally wanted to use the <marquee> tag to move multiple words across my page, thus moving them offscreen, in a continuous loop. However, I found out the marquee tag is obsolete, and now I have to use the CSS3 Animations and Transitions to do the same thing. However, I can't find a way to make the word slide off screen entirely, and then simply reloop, like a regular marquee. Can someone please help me do this, in the simplest way possible?

 

 

Also, since I'm new to this particular section, please give all your advice in the simplest way!

 

I want to say thank you in advance as well.

Link to post
Share on other sites

Using 'Try it example' at http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_count2

<!DOCTYPE html><html><head><style> #marqueeWrap {overflow:hidden; position: relative; }.marquee {   /* width: 100px;    height: 100px;    background-color: red;*/    position: relative;    -webkit-animation-name: example; /* Chrome, Safari, Opera */    -webkit-animation-duration: 8s; /* Chrome, Safari, Opera */    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */-webkit-animation-timing-function: linear;animation-timing-function: linear;    animation-name: example;    animation-duration: 8s;    animation-iteration-count: infinite;white-space: nowrap;}/* Chrome, Safari, Opera */@-webkit-keyframes example {    0%   {background-color:red; left:-100%; top:0px;}   /* 25%  {background-color:yellow; left:200px; top:0px;}    50%  {background-color:blue; left:200px; top:200px;}    75%  {background-color:green; left:0px; top:200px;}*/    100% {background-color:red; left:100%; top:0px;}}/* Standard syntax */@keyframes example {    0%   {background-color:red; left:-100%; top:0px;}   /* 25%  {background-color:yellow; left:200px; top:0px;}    50%  {background-color:blue; left:200px; top:200px;}    75%  {background-color:green; left:0px; top:200px;}*/    100% {background-color:red; left:100%; top:0px;}}</style></head><body><p id="marqueeWrap"><span class="marquee"><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</span</p></body></html>
Edited by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...