Provi Posted May 27, 2015 Share Posted May 27, 2015 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 comment Share on other sites More sharing options...
dsonesuk Posted May 27, 2015 Share Posted May 27, 2015 (edited) 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 May 27, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
Provi Posted May 28, 2015 Author Share Posted May 28, 2015 Omg. Thank you dsonesuk. I'm going to play around with it now to understand better how it works. Thank you very much. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now