How to create transition with css of text that scrolls in from right and out in left and starts over again...
I'm trying to animate my dashboard with a scrolling text in the footer at the bottom of the screen. Have almost succeeded with some CSS and an absolute position, but it "lags" sometimes, and it's on every computer/screen I tested it on.
How it should work, is that text will scroll in from right side, and scroll out of the screen in the left side.
Css code
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 7rem;
font-family: 'Segoe UI';
font-weight: 500;
display: inline-block;
background-color: #fcfcfc;
color: black;
border-top: 1px solid rgba(217, 217, 217, .5);
text-align: center;
padding-top: 0.5rem;
}
.footer .footer-text {
vertical-align: -webkit-baseline-middle;
white-space: nowrap;
color:black;
font-size: 2.7em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
position:absolute;
-webkit-animation: anim 25.5s infinite;
animation: anim 25.5s infinite;
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
}
@-webkit-keyframes anim {
from {
right: -300%;
}
to {
right: 100%;
}
}
@keyframes anim {
from {
right: -300%;
}
to {
right: 100%;
}
}
HTML code
<div class="footer">
<div class="footer-text">
<span>Some scrolling text here</span>
</div>
</div>
It works, but it lags quite often when it runs, you can see the text is not smooth. Tested in Chrome and Firefox (Chrome will be the primary browser where the application will run)
Any possible fix to this, or is it just not possible with css to make these kind of animation?
Btw, I'm using Angular
Hope someone can comment on a possible direction/fix ;)
javascript html css animation css-animations
asked Nov 21 '18 at 19:23
RayRay
256
add a comment |
I'm trying to animate my dashboard with a scrolling text in the footer at the bottom of the screen. Have almost succeeded with some CSS and an absolute position, but it "lags" sometimes, and it's on every computer/screen I tested it on.
How it should work, is that text will scroll in from right side, and scroll out of the screen in the left side.
Css code
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 7rem;
font-family: 'Segoe UI';
font-weight: 500;
display: inline-block;
background-color: #fcfcfc;
color: black;
border-top: 1px solid rgba(217, 217, 217, .5);
text-align: center;
padding-top: 0.5rem;
}
.footer .footer-text {
vertical-align: -webkit-baseline-middle;
white-space: nowrap;
color:black;
font-size: 2.7em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
position:absolute;
-webkit-animation: anim 25.5s infinite;
animation: anim 25.5s infinite;
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
}
@-webkit-keyframes anim {
from {
right: -300%;
}
to {
right: 100%;
}
}
@keyframes anim {
from {
right: -300%;
}
to {
right: 100%;
}
}
HTML code
<div class="footer">
<div class="footer-text">
<span>Some scrolling text here</span>
</div>
</div>
It works, but it lags quite often when it runs, you can see the text is not smooth. Tested in Chrome and Firefox (Chrome will be the primary browser where the application will run)
Any possible fix to this, or is it just not possible with css to make these kind of animation?
Btw, I'm using Angular
Hope someone can comment on a possible direction/fix ;)
javascript html css animation css-animations
asked Nov 21 '18 at 19:23
RayRay
256
add a comment |
I'm trying to animate my dashboard with a scrolling text in the footer at the bottom of the screen. Have almost succeeded with some CSS and an absolute position, but it "lags" sometimes, and it's on every computer/screen I tested it on.
How it should work, is that text will scroll in from right side, and scroll out of the screen in the left side.
Css code
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 7rem;
font-family: 'Segoe UI';
font-weight: 500;
display: inline-block;
background-color: #fcfcfc;
color: black;
border-top: 1px solid rgba(217, 217, 217, .5);
text-align: center;
padding-top: 0.5rem;
}
.footer .footer-text {
vertical-align: -webkit-baseline-middle;
white-space: nowrap;
color:black;
font-size: 2.7em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
position:absolute;
-webkit-animation: anim 25.5s infinite;
animation: anim 25.5s infinite;
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
}
@-webkit-keyframes anim {
from {
right: -300%;
}
to {
right: 100%;
}
}
@keyframes anim {
from {
right: -300%;
}
to {
right: 100%;
}
}
HTML code
<div class="footer">
<div class="footer-text">
<span>Some scrolling text here</span>
</div>
</div>
It works, but it lags quite often when it runs, you can see the text is not smooth. Tested in Chrome and Firefox (Chrome will be the primary browser where the application will run)
Any possible fix to this, or is it just not possible with css to make these kind of animation?
Btw, I'm using Angular
Hope someone can comment on a possible direction/fix ;)
javascript html css animation css-animations
asked Nov 21 '18 at 19:23
RayRay
256
I'm trying to animate my dashboard with a scrolling text in the footer at the bottom of the screen. Have almost succeeded with some CSS and an absolute position, but it "lags" sometimes, and it's on every computer/screen I tested it on.
How it should work, is that text will scroll in from right side, and scroll out of the screen in the left side.
Css code
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 7rem;
font-family: 'Segoe UI';
font-weight: 500;
display: inline-block;
background-color: #fcfcfc;
color: black;
border-top: 1px solid rgba(217, 217, 217, .5);
text-align: center;
padding-top: 0.5rem;
}
.footer .footer-text {
vertical-align: -webkit-baseline-middle;
white-space: nowrap;
color:black;
font-size: 2.7em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
position:absolute;
-webkit-animation: anim 25.5s infinite;
animation: anim 25.5s infinite;
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
}
@-webkit-keyframes anim {
from {
right: -300%;
}
to {
right: 100%;
}
}
@keyframes anim {
from {
right: -300%;
}
to {
right: 100%;
}
}
HTML code
<div class="footer">
<div class="footer-text">
<span>Some scrolling text here</span>
</div>
</div>
It works, but it lags quite often when it runs, you can see the text is not smooth. Tested in Chrome and Firefox (Chrome will be the primary browser where the application will run)
Any possible fix to this, or is it just not possible with css to make these kind of animation?
Btw, I'm using Angular
Hope someone can comment on a possible direction/fix ;)
javascript html css animation css-animations
javascript html css animation css-animations
asked Nov 21 '18 at 19:23
RayRay
256
asked Nov 21 '18 at 19:23
RayRay
256
asked Nov 21 '18 at 19:23
RayRay
256
asked Nov 21 '18 at 19:23
RayRay
256
asked Nov 21 '18 at 19:23
RayRay
256
256
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Try using a CSS transform instead of changing the positioning reference causes the browser to check for page reflows and is very inefficient.
@-webkit-keyframes anim {
from {
transform: translateX(300%);
}
to {
transform: translateX(0);
}
}
@keyframes anim {
from {
transform: translateX(300%);
}
to {
transform: translateX(0);
}
}
answered Nov 21 '18 at 20:07
Bryce HowitsonBryce Howitson
551210
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419210%2fhow-to-create-transition-with-css-of-text-that-scrolls-in-from-right-and-out-in%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try using a CSS transform instead of changing the positioning reference causes the browser to check for page reflows and is very inefficient.
@-webkit-keyframes anim {
from {
transform: translateX(300%);
}
to {
transform: translateX(0);
}
}
@keyframes anim {
from {
transform: translateX(300%);
}
to {
transform: translateX(0);
}
}
answered Nov 21 '18 at 20:07
Bryce HowitsonBryce Howitson
551210
add a comment |
Try using a CSS transform instead of changing the positioning reference causes the browser to check for page reflows and is very inefficient.
@-webkit-keyframes anim {
from {
transform: translateX(300%);
}
to {
transform: translateX(0);
}
}
@keyframes anim {
from {
transform: translateX(300%);
}
to {
transform: translateX(0);
}
}
answered Nov 21 '18 at 20:07
Bryce HowitsonBryce Howitson
551210
add a comment |
Try using a CSS transform instead of changing the positioning reference causes the browser to check for page reflows and is very inefficient.
@-webkit-keyframes anim {
from {
transform: translateX(300%);
}
to {
transform: translateX(0);
}
}
@keyframes anim {
from {
transform: translateX(300%);
}
to {
transform: translateX(0);
}
}
answered Nov 21 '18 at 20:07
Bryce HowitsonBryce Howitson
551210
Try using a CSS transform instead of changing the positioning reference causes the browser to check for page reflows and is very inefficient.
@-webkit-keyframes anim {
from {
transform: translateX(300%);
}
to {
transform: translateX(0);
}
}
@keyframes anim {
from {
transform: translateX(300%);
}
to {
transform: translateX(0);
}
}
answered Nov 21 '18 at 20:07
Bryce HowitsonBryce Howitson
551210
answered Nov 21 '18 at 20:07
Bryce HowitsonBryce Howitson
551210
answered Nov 21 '18 at 20:07
Bryce HowitsonBryce Howitson
551210
answered Nov 21 '18 at 20:07
Bryce HowitsonBryce Howitson
551210
551210
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419210%2fhow-to-create-transition-with-css-of-text-that-scrolls-in-from-right-and-out-in%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
