I'm creating a marquee effect with CSS3 animation.
#caption {
position: fixed;
bottom: 0;
left: 0;
font-size: 20px;
line-height: 30px;
height:30px;
width: 100%;
white-space: nowrap;
-moz-animation: caption 50s linear 0s infinite;
-webkit-animation: caption 50s linear 0s infinite;
}
#-moz-keyframes caption {
0% { margin-left:120%; } 100% { margin-left:-4200px; }
}
#-webkit-keyframes caption {
0% { margin-left:120%; } 100% { margin-left:-4200px; }
}
<div id="caption">
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog.
</div>
Now I can get the basic marquee effect, but the code is too specific for this demo.
Is there a way to avoid using specific values like margin-left:-4200px;, so that it can adapt text in any length?
Here is a similar demo: http://jsfiddle.net/jonathansampson/XxUXD/ that uses text-indent but still with specific values.
With a small change of the markup, here's my approach (I've just inserted a span inside the paragraph):
.marquee {
width: 450px;
margin: 0 auto;
overflow: hidden;
box-sizing: border-box;
}
.marquee span {
display: inline-block;
width: max-content;
padding-left: 100%;
/* show the marquee just outside the paragraph */
will-change: transform;
animation: marquee 15s linear infinite;
}
.marquee span:hover {
animation-play-state: paused
}
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
/* Respect user preferences about animations */
#media (prefers-reduced-motion: reduce) {
.marquee span {
animation-iteration-count: 1;
animation-duration: 0.01;
/* instead of animation: none, so an animationend event is
* still available, if previously attached.
*/
width: auto;
padding-left: 0;
}
}
<p class="marquee">
<span>
When I had journeyed half of our life's way, I found myself
within a shadowed forest, for I had lost the path that
does not stray. – (Dante Alighieri, <i>Divine Comedy</i>.
1265-1321)
</span>
</p>
No hardcoded values — dependent on paragraph width — have been inserted.
The animation applies the CSS3 transform property (use prefixes where needed) so it performs well.
If you need to insert a delay just once at the beginning then also set an animation-delay. If you need instead to insert a small delay at every loop then try to play with an higher padding-left (e.g. 150%)
Based on the previous reply, mainly #fcalderan, this marquee scrolls when hovered, with the advantage that the animation scrolls completely even if the text is shorter than the space within it scrolls, also any text length takes the same amount of time (this may be a pros or a cons) when not hovered the text return in the initial position.
No hardcoded value other than the scroll time, best suited for small scroll spaces
.marquee {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
display: inline-flex;
}
.marquee span {
display: flex;
flex-basis: 100%;
animation: marquee-reset;
animation-play-state: paused;
}
.marquee:hover> span {
animation: marquee 2s linear infinite;
animation-play-state: running;
}
#keyframes marquee {
0% {
transform: translate(0%, 0);
}
50% {
transform: translate(-100%, 0);
}
50.001% {
transform: translate(100%, 0);
}
100% {
transform: translate(0%, 0);
}
}
#keyframes marquee-reset {
0% {
transform: translate(0%, 0);
}
}
<span class="marquee">
<span>This is the marquee text (hover the mouse here)</span>
</span>
The accepted answers animation does not work on Safari, I've updated it using translate instead of padding-left which makes for a smoother, bulletproof animation.
Also, the accepted answers demo fiddle has a lot of unnecessary styles.
So I created a simple version if you just want to cut and paste the useful code and not spend 5 mins clearing through the demo.
http://jsfiddle.net/e8ws12pt/
.marquee {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
padding: 0;
height: 16px;
display: block;
}
.marquee span {
display: inline-block;
text-indent: 0;
overflow: hidden;
-webkit-transition: 15s;
transition: 15s;
-webkit-animation: marquee 15s linear infinite;
animation: marquee 15s linear infinite;
}
#keyframes marquee {
0% { transform: translate(100%, 0); -webkit-transform: translateX(100%); }
100% { transform: translate(-100%, 0); -webkit-transform: translateX(-100%); }
}
<p class="marquee"><span>Simple CSS Marquee - Lorem ipsum dolor amet tattooed squid microdosing taiyaki cardigan polaroid single-origin coffee iPhone. Edison bulb blue bottle neutra shabby chic. Kitsch affogato you probably haven't heard of them, keytar forage plaid occupy pitchfork. Enamel pin crucifix tilde fingerstache, lomo unicorn chartreuse plaid XOXO yr VHS shabby chic meggings pinterest kickstarter.</span></p>
The following should do what you want.
#keyframes marquee {
from { text-indent: 100% }
to { text-indent: -100% }
}
Related
I created a marquee-like effect on the top of this page. The text is coded to continuously scroll horizontally. The text should continuously scroll with no gaps. It's working in Safari and Firefox, but for some reason in Chrome, after a few seconds, it just cuts off. The weird thing is, if I highlight the area where I know the text is, it reappears. Do you all know why this is happening? Any insight/help would be appreciated as I am a student learning how to code! I've attached screenshots, of how it first looks when the text disappears, and the other screenshot shows it reappearing after I highlight the area.
Screenshot of Text Disappearing
Screenshot of me Highlighting the area of the scrollable text, makes the text visible again on the page
I am using MacOS Catalina Version 10.15.7 and my Chrome version is Version 87.0.4280.88 (Official Build) (x86_64). I showed this code to a friend as well, and they experienced the same issue in Chrome.
UPDATE: Looks like this issue is related to overflow:hidden
Below is my html
<section class="intro section section-pad bg-cover" id="intro">
<div class="copy container">
<div class="marquee">
<!-- Here we add the title in multiple repeating times using javascript -->
<span>Event -- January 1-2, 2020, Zoom</span>
</div>
</section>
Here is the CSS:
.section {
/*each section will take 100% of the height of browser */
min-height: 100vh;
/* Will help to vertically align container box */
display: flex;
position: relative;
}
/* Provide padding to left and right of section */
.section-pad {
padding-left: 5vw;
padding-right: 5vw;
}
.container {
/* Take the width of widest content box */
max-width: 780px;
/* Center our box horizontally and vertically using flex on .section */
margin: auto;
}
.marquee {
position: absolute;
top: 3vh;
left: 0;
width: 100%;
/*Each letter will be 5% of viewport width */
font-size: 5vw;
/* As tall as text */
line-height: 1;
text-transform: uppercase;
/*no scrollbars */
overflow: hidden;
}
.marquee span {
transform: translate3d(0, 0, 0);
-webkit-animation-name: moveLeft;
animation-name: moveLeft;
-webkit-animation-duration: 500s;
animation-duration: 500s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
/*This will ensure the text stays all on the same line */
white-space: nowrap;
/* Our span is inline by default, so change it to block */
display: block;
/*Help with animation */
position: relative;
}
#keyframes moveLeft {
0% {
/* transform: translate(0);*/
-webkit-transform: translatex(0);
transform: translatex(0);
}
100% {
/* transform: translateX(-3000vw); */
-webkit-transform: translatex(-3000vw);
transform: translatex(-3000vw);
}
}
#-webkit-keyframes moveLeft {
0% {
/* transform: translate(0);*/
-webkit-transform: translatex(0);
transform: translatex(0);
}
100% {
/* transform: translateX(-3000vw); */
-webkit-transform: translatex(-3000vw);
transform: translatex(-3000vw);
}
}
And Finally here is the Javascript used
function makeMarquee () {
const title ='Event -- January 1-2, 2021, Zoom'
//use Array constructor to create an empty list with a length of 50 that is filled with the title.
//We can join all the contents of array using dash
const marqueeText = new Array(500).fill(title).join(' -- ')
//query Selector same as $ jquery, grab the span tags
const marquee = document.querySelector('.marquee span')
//set the text of span to be the marqueeText
marquee.innerHTML = marqueeText
}
makeMarquee()
Below is a Snippet as well
function makeMarquee () {
const title ='Event -- January 1-2, 2021, Zoom'
//use Array constructor to create an empty list with a length of 50 that is filled with the title.
//We can join all the contents of array using dash
const marqueeText = new Array(500).fill(title).join(' -- ')
//query Selector same as $ jquery, grab the span tags
const marquee = document.querySelector('.marquee span')
//set the text of span to be the marqueeText
marquee.innerHTML = marqueeText
}
makeMarquee()
.section {
/*each section will take 100% of the height of browser */
min-height: 100vh;
/* Will help to vertically align container box */
display: flex;
position: relative;
}
/* Provide padding to left and right of section */
.section-pad {
padding-left: 5vw;
padding-right: 5vw;
}
.container {
/* Take the width of widest content box */
max-width: 780px;
/* Center our box horizontally and vertically using flex on .section */
margin: auto;
}
.marquee {
position: absolute;
top: 3vh;
left: 0;
width: 100%;
/*Each letter will be 5% of viewport width */
font-size: 5vw;
/* As tall as text */
line-height: 1;
text-transform: uppercase;
/*no scrollbars */
overflow: hidden;
}
.marquee span {
transform: translate3d(0, 0, 0);
-webkit-animation-name: moveLeft;
animation-name: moveLeft;
-webkit-animation-duration: 500s;
animation-duration: 500s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
/*This will ensure the text stays all on the same line */
white-space: nowrap;
/* Our span is inline by default, so change it to block */
display: block;
/*Help with animation */
position: relative;
}
#keyframes moveLeft {
0% {
/* transform: translate(0);*/
-webkit-transform: translatex(0);
transform: translatex(0);
}
100% {
/* transform: translateX(-3000vw); */
-webkit-transform: translatex(-3000vw);
transform: translatex(-3000vw);
}
}
#-webkit-keyframes moveLeft {
0% {
/* transform: translate(0);*/
-webkit-transform: translatex(0);
transform: translatex(0);
}
100% {
/* transform: translateX(-3000vw); */
-webkit-transform: translatex(-3000vw);
transform: translatex(-3000vw);
}
}
<section class="intro section section-pad bg-cover" id="intro">
<div class="copy container">
<div class="marquee">
<!-- Here we add the title in multiple repeating times using javascript -->
<span>Event -- January 1-2, 2020, Zoom</span>
</div>
</div>
</section>
The gap in Chrome (and Edge) is caused by setting overflow: hidden on the marquee. The browsers seem to sense that they have shown enough (I am not sure what enough means in this context as the max-width is set quite low at 768px) and that they must not show the overflow but they carry on with the animation so after 50 seconds it starts again from the beginning.
Why the other browsers (Firefox, Safari) don't honor the overflow I have not been able to discover.
If you change the .marquee to have overflow: visible then all these browsers will continue the animation with no gaps.
UPDATE: in addition section is given overflow: hidden and the timing and distance travelled has been altered to prevent an x-overflow bar showing.
function makeMarquee () {
const title ='Event -- January 1-2, 2021, Zoom'
//use Array constructor to create an empty list with a length of 50 that is filled with the title.
//We can join all the contents of array using dash
const marqueeText = new Array(500).fill(title).join(' -- ')
//query Selector same as $ jquery, grab the span tags
const marquee = document.querySelector('.marquee span');
//set the text of span to be the marqueeText
marquee.innerHTML = marqueeText
// setTimeout(function () {marquee.style.animationName = 'moveLeft';},1000);
}
makeMarquee()
.section {
/*each section will take 100% of the height of browser */
min-height: 100vh;
/* Will help to vertically align container box */
display: flex;
position: relative;
overflow: hidden; /* added to prevent 'gap' appearing on Chrome/Edge */
}
/* Provide padding to left and right of section */
.section-pad {
padding-left: 5vw;
padding-right: 5vw;
}
.container {
/* Take the width of widest content box */
max-width: 780px;
/* Center our box horizontally and vertically using flex on .section */
margin: auto;
}
.marquee {
position: absolute;
top: 3vh;
left: 0;
width: 100%;
/*Each letter will be 5% of viewport width */
font-size: 5vw;
/* As tall as text */
line-height: 1;
text-transform: uppercase;
/*no scrollbars */
/* but - make visible otherwise Chrome/Edge stop showing overflowed bits so get a gap */
overflow: visible; /* was hidden not visible */
}
.marquee span {
transform: translate3d(0, 0, 0);
animation-name: moveLeft;
animation-duration: 550s; /* altered from 50s as have longer for the text to travel now */
animation-timing-function: linear;
animation-iteration-count: infinite;
/*This will ensure the text stays all on the same line */
white-space: nowrap;
/* Our span is inline by default, so change it to block */
display: block;
/*Help with animation */
position: relative;
width: 4000vw; /* this is a bit hacky but does the trick - fools Chrome etc into thinking overflow is OK */
}
#keyframes moveLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);/* was 3000vw */
}
}
<section class="intro section section-pad bg-cover" id="intro">
<div class="copy container">
<div class="marquee">
<!-- Here we add the title in multiple repeating times using javascript -->
<span>Event -- January 1-2, 2020, Zoom</span>
</div>
</div>
</section>
I face quite big stuck while studying CSS animation.
I'm going to make a "transform: translate" animation which shows text that overflow content width like below situation.
How it works?: (Youtube video link)
var div1 = document.getElementById("div1");
var cont = document.getElementById("content");
var inf = document.getElementById("inf");
inf.innerHTML = "<p> Does the text inside h1 cut off? : " + (cont.offsetWidth < cont.scrollWidth) +
"<br><b>Length of text overflow</b>: " + (cont.offsetWidth - cont.scrollWidth) +
"<br> h1 width: " + (cont.offsetWidth) + ", h1's text length: " + (cont.scrollWidth) + "</p>";
div1.style.backgroundColor = "#A13DAF";
cont.style.webkitAnimationName = "moving";
cont.style.animationName = "moving";
cont.style.animationDuration = "3s";
cont.style.webkitAnimationDuration = "3s";
cont.style.animationTimingFunction = "linear";
cont.style.webkitAnimationTimingFunction = "linear";
#div1 {
margin: 10px;
width: 300px;
background: rgb(40, 40, 40);
white-space: nowrap;
overflow: hidden;
}
#content {
color: white;
width: 100%;
/* animation-name: moving;
animation-duration: 3s;
animation-timing-function: linear;
-webkit-animation-name: moving;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear; */
}
#keyframes moving {
0% {
transform: none;
-webkit-transform: none;
}
65% {
/*below code is pseudo code, It doesn't work,
It is an explanation of the direction I want but.. I can't find way to ...ㅠㅠ*/
transform: translate( calc(#content.scrollWidth - #content.offsetWidth), 0);
-webkit-transform: translate( calc(#content.scrollWidth - #content.offsetWidth), 0);
/*below value is caculated value of fixed text length and content width,
but if either of these changes, this code will not be available for my purpose.
Is there any way to specific values of CSS elements?*/
transform: translate( -668px, 0);
-webkit-transform: translate( -668px, 0);
}
100% {
transform: translate( -668px, 0);
-webkit-transform: translate( -668px, 0);
}
}
<div id="div1">
<h1 id="content">
The only thing that matters now is everything You think of me
</h1>
</div>
<div id="inf"></div>
Like Above code,
I want to make the text to move left in the content (h1), as much as the amount of the cut off cause of its overflow.
But, I can't find a way to refer values of content in CSS.
Is there any way to modify a CSS value by referring to a specific value of another element in the CSS without JavaScript?
I try to avoid the method of changing the keyframe using Javascript as much as possible, though it can be quite heavy.
Thank you very much.
You could animate both transform and simultaneously the margin-left so that the animation will end exactly at the text-end:
.marquee {
position: relative;
overflow: hidden;
background: rgb(161, 61, 175);
color: #fff;
}
.marquee span {
display: inline-block;
min-width: 100%; /* this is to prevent shorter text animate to right */
white-space: nowrap;
font-size: 2.5em;
animation: marquee 4s ease-in-out forwards;
}
#keyframes marquee {
from {transform: translateX(0); margin-left: 0;}
to {transform: translateX(-100%); margin-left: 100%; }
}
<h1 class="marquee">
<span>The only thing that matters now is everything You think of me</span>
</h1>
<p class="marquee">
<span>Beware of short texts!</span>
</p>
Here is another idea with only transform used as animation:
.marquee {
overflow: hidden;
background: rgb(161, 61, 175);
color: #fff;
}
.marquee > span {
display:block;
animation: marquee 4s ease-in-out;
transform: translateX(100%);
}
.marquee > * > span {
display: inline-block;
min-width: 100%;
white-space: nowrap;
font-size: 2.5em;
animation:inherit;
transform: translateX(-100%);
}
#keyframes marquee {
from {
transform: translateX(0);
}
}
<h1 class="marquee">
<span>
<span>The only thing that matters now is everything You think of me</span>
</span>
</h1>
<h1 class="marquee">
<span>
<span>The only thing that matters now is everything</span>
</span>
</h1>
<p class="marquee">
<span>
<span>Beware of short texts!</span>
</span>
</p>
I have a bounce animation occur on hover on my page (on an image of an arrow). However, if the cursor is near the top edge, it will generally jitter, due to the change of the position of the content area from what I can gather. The image will move, bringing your mouse out of the hover area, resetting the image position abruptly, and repeating until you move the mouse.
Does anyone have any idea how to fix this? Can be CSS/Javascript/some other library, doesn't matter to me.
.arrow-main {
position: absolute;
left: 0;
right: 0;
bottom: 1%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
width: 90px;
}
.bounce:hover {
-webkit-animation:bounce .9s infinite;
-moz-animation:bounce .9s infinite;
-o-animation:bounce .9s infinite;
animation:bounce .9s infinite;
}
#-webkit-keyframes bounce {
0% { bottom:10px; }
50% { bottom:0px; }
100% { bottom:10px; }
}
#-moz-keyframes bounce {
0% { bottom:10px; }
50% { bottom:0px; }
100% { bottom:10px; }
}
#-o-keyframes bounce {
0% { bottom:10px; }
50% { bottom:0px; }
100% { bottom:10px; }
}
#keyframes bounce {
0% { bottom:10px; }
50% { bottom:0px; }
100% { bottom:10px; }
}
I actually made a codepen to try and illustrate the issue, but it doesn't jitter at all... I'm using Chrome.
EDIT: Just tried the codepen again, and it jitters as it should.
EDIT 2: I modified the codepen to try out the comments so far, and if you hold your cursor near the bottom of the arrow img, you should get an idea of what I am trying to combat.
CodePen
I’m wondering if it’s possible to have the text content of a div increase and decrease in font size repeatedly every second. This would give an effect where the text seems to move closer to the viewer before moving back, ideally it would be a smooth transition and wouldn’t look like a 2 frame gif.
This is my attempt using Javascript to change the font size every second:
<div id="textdiv">ZOOM</div>
<script>
function zoomtext(){
var textdiv = document.getElementById("textdiv");
textdiv.style.fontSize = "20px";
textdiv.style.fontSize = "25px";
setTimeout(zoomtext, 1000);
}
</script>
This isn’t working, and I’m not sure that this code would result in a smooth transition.
Perhaps it’s possible to make a smooth transition by changing the font by tenths of a pixel (for example: 20px, 20.1px, 20.2px …and so on until 25px, and then decreasing it back to 20px in the same way).
I’m worried that method might result in a Javascript function running constantly, which might slow down my page.
Is there a better way to get this effect?
Use CSS transitions with scale transformation. Font-size transitions are never smooth, and transitions on transform are cheap.
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.5);
}
Repetition can be accomplished through CSS3 animations:
.grow {
width: 100px;
text-align: center;
animation: grow-animation 2s linear infinite;
}
#keyframes grow-animation {
0% { transform: scale(1); }
50% {transform: scale(2); }
100% {transform: scale(1); }
}
You can achieve the same effect using CSS Animations. It's pretty easy, too, and far better than using Javascript for that.
You need to assign your element the animation property, which you then define.
#textdiv {
animation: textgrowth 1s infinite alternate;
}
#keyframes textgrowth {
0% {
font-size: 20px;
}
100% {
font-size: 25px;
}
}
Be sure to add alternate at the end of your CSS rule to make the animation go back and forth.
if it is only zoom at screen , and not growing the container too, then scale(); should be what you look for:
#textdiv {
-webkit-animation: zoom1-2 infinite 1s;
animation: zoom1-2 infinite 1s;
-webkit-transform-origin:0 0 ;
transform-origin:0 0 ;
font-size:20px;
}
#-webkit-keyframes zoom1-2 {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#keyframes zoom1-2 {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
<div id="textdiv">ZOOM</div>
<div>don't push me</div>
Instead of javascript you could use CSS animations.
Some example HTML:
<!DOCTYPE html>
<head>
<title>keyframes text size animation test</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p id="textdiv">ZOOM</p>
</body>
</html>
And the CSS
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
#textdiv {
-webkit-animation: adjustText 1s infinite alternate;
-moz-animation: adjustText 1s infinite alternate;
-o-animation: adjustText 1s infinite alternate;
animation: adjustText 1s infinite alternate;
}
#keyframes adjustText {
from {
font-size: 20px;
}
to {
font-size: 25px;
}
}
Here's a working codepen of this example
Try this one:
function zoomtext(){
var textdiv = document.getElementById("textdiv");
var fontSize = textdiv.style.fontSize;
if (fontSize !== '48px') {
textdiv.style.fontSize = '48px';
}
else {
textdiv.style.fontSize = '21px';
}
setTimeout(zoomtext, 1000);
}
zoomtext();
<div id="textdiv">ZOOM</div>
I have element with long inline text and want to make animation that will move this text from off-screen right (whole text behind right border of window) to the left off-screen.
My idea is to move element by setting margin-left to minus(width) of element:
var element = $(this);
$("p").animate({
'marginLeft': - element;
}, 4000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>element with long long long long inline text....</p>
But this does not work. Any ideas?
In that context, as far as I can tell, $(this) is the window. You want to animate the $("p") itself, and you need to specify you're animating based on it's width, not the general DOM element. There also was a rogue ; in your object that you were sending to the animate function (you can see errors like this in your Developer Tools Console).
var $element = $("p");
$element.animate({
'marginLeft': -($element.outerWidth())
}, 4000);
body {
margin: 0;
font-family: sans-serif;
font-size: 12px;
overflow-x: hidden; /* no horizontal scrollbar */
}
p {
white-space: nowrap;
background: #ccc;
display: inline-block;
margin-left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>element with long long long long inline text....</p>
EDIT
Or, here it is with pure CSS. This is the more effective route to take, if the browsers you're developing for support it. It causes the browser to "repaint" less, and runs on the GPU instead of CPU like JS does.
body {
margin: 0;
font-family: sans-serif;
font-size: 12px;
overflow-x: hidden; /* no horizontal scrollbar */
}
#-webkit-keyframes offscreenLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
#-moz-keyframes offscreenLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
#-o-keyframes offscreenLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
#keyframes offscreenLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
p {
white-space: nowrap;
background: #ccc;
display: inline-block;
padding-left: 100%; /* translate uses the inner width of the p tag, so the thing pushing it offscreen needs to be *inside* the p, not outside (like margin is) */
-webkit-animation: offscreenLeft 4s forwards; /* Safari 4+ */
-moz-animation: offscreenLeft 4s forwards; /* Fx 5+ */
-o-animation: offscreenLeft 4s forwards; /* Opera 12+ */
animation: offscreenLeft 4s forwards; /* IE 10+, Fx 29+ */
}
<p>element with long long long long inline text....</p>
If I were you, I would toggle a class on the element and using CSS's transform: translateX() combined with transition to move the element off screen.
codepen
css
p {
transform: translateX(0);
transition: transform 0.3s ease;
}
p.off-screen-right {
transform: translateX(100%)
}
js
$(document).ready(function () {
$('button').click(function () {
$('p').toggleClass('off-screen-right')
})
})
Steps
Get the <p> width and save it in a variable.
Then, sets the initial margin-left to the $(window).width()
After that, you can call the animate function to set the margin-left to the negative value of the width you've saved in the variable initially
Working code
$(function() {
var width = $("p").width();
$("p")
.css('margin-left', $(window).width())
.animate({ 'margin-left': -width }, 4000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>element with long long long long inline text....</p>