Not able to make the CSS3 animation as continuous2019 Community Moderator ElectionMake a div fill the height of the remaining screen spaceHow to make div not larger than its contents?How to make a div 100% height of the browser window?How do I combine a background-image and CSS3 gradient on the same element?Make the cursor a hand when a user hovers over a list itemMaintaining the final state at end of a CSS3 animationcss3 :hover animation not working on firefoxCSS3 - Image SlideshowCSS animation rules disappear in Firefox resulting in no animationDraw a vertical line upward with CSS3 SVG animation
Is King K. Rool's down throw to up-special a true combo?
Ban on all campaign finance?
Can infringement of a trademark be pursued for using a company's name in a sentence?
Should QA ask requirements to developers?
Plywood subfloor won't screw down in a trailer home
Excess Zinc in garden soil
Is it true that real estate prices mainly go up?
Good allowance savings plan?
Coworker uses her breast-pump everywhere in the office
Need some help with my first LaTeX drawing…
Running a subshell from the middle of the current command
If Invisibility ends because the original caster casts a non-concentration spell, does Invisibility also end on other targets of the original casting?
My story is written in English, but is set in my home country. What language should I use for the dialogue?
My adviser wants to be the first author
When two POV characters meet
Word for a person who has no opinion about whether god exists
Single word request: Harming the benefactor
Why does Deadpool say "You're welcome, Canada," after shooting Ryan Reynolds in the end credits?
How does Dispel Magic work against Stoneskin?
What Happens when Passenger Refuses to Fly Boeing 737 Max?
Extension of Splitting Fields over An Arbitrary Field
Do I need to leave some extra space available on the disk which my database log files reside, for log backup operations to successfully occur?
Should we release the security issues we found in our product as CVE or we can just update those on weekly release notes?
Question about partial fractions with irreducible quadratic factors
Not able to make the CSS3 animation as continuous
2019 Community Moderator ElectionMake a div fill the height of the remaining screen spaceHow to make div not larger than its contents?How to make a div 100% height of the browser window?How do I combine a background-image and CSS3 gradient on the same element?Make the cursor a hand when a user hovers over a list itemMaintaining the final state at end of a CSS3 animationcss3 :hover animation not working on firefoxCSS3 - Image SlideshowCSS animation rules disappear in Firefox resulting in no animationDraw a vertical line upward with CSS3 SVG animation
I am following one blog to understand the CSS3 animations. I wanted to do marquee effect vertically using CSS3. I have followed this example. But the my issue is why there is some delay to restart the animation? When scroll came to down, it is not starting immediately from the top. Some 2,3 seconds of delay is there. How to start the animation from top immediately after the scroll ends. I am attaching gif file here to understand much better.
Code snippet:
<!DOCTYPE html>
<title>Example</title>
<!-- Styles -->
<style>
.example3
height: 200px;
overflow: hidden;
position: relative;
.example3 h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
/* Apply animation to this element */
-moz-animation: example3 15s linear infinite;
-webkit-animation: example3 15s linear infinite;
animation: example3 15s linear infinite;
/* Move it (define the animation) */
@-moz-keyframes example3
0% -moz-transform: translateY(-100%);
100% -moz-transform: translateY(100%);
@-webkit-keyframes example3
0% -webkit-transform: translateY(-100%);
100% -webkit-transform: translateY(100%);
@keyframes example3
0%
-moz-transform: translateY(-100%); /* Firefox bug fix */
-webkit-transform: translateY(-100%); /* Firefox bug fix */
transform: translateY(-100%);
100%
-moz-transform: translateY(100%); /* Firefox bug fix */
-webkit-transform: translateY(100%); /* Firefox bug fix */
transform: translateY(100%);
</style>
<!-- HTML -->
<div class="example3">
<h3>Scrolling down... </h3>
</div>
css css3 css-animations translate-animation
asked Mar 6 at 17:21
MihirMihir
4,435134880
add a comment |
I am following one blog to understand the CSS3 animations. I wanted to do marquee effect vertically using CSS3. I have followed this example. But the my issue is why there is some delay to restart the animation? When scroll came to down, it is not starting immediately from the top. Some 2,3 seconds of delay is there. How to start the animation from top immediately after the scroll ends. I am attaching gif file here to understand much better.
Code snippet:
<!DOCTYPE html>
<title>Example</title>
<!-- Styles -->
<style>
.example3
height: 200px;
overflow: hidden;
position: relative;
.example3 h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
/* Apply animation to this element */
-moz-animation: example3 15s linear infinite;
-webkit-animation: example3 15s linear infinite;
animation: example3 15s linear infinite;
/* Move it (define the animation) */
@-moz-keyframes example3
0% -moz-transform: translateY(-100%);
100% -moz-transform: translateY(100%);
@-webkit-keyframes example3
0% -webkit-transform: translateY(-100%);
100% -webkit-transform: translateY(100%);
@keyframes example3
0%
-moz-transform: translateY(-100%); /* Firefox bug fix */
-webkit-transform: translateY(-100%); /* Firefox bug fix */
transform: translateY(-100%);
100%
-moz-transform: translateY(100%); /* Firefox bug fix */
-webkit-transform: translateY(100%); /* Firefox bug fix */
transform: translateY(100%);
</style>
<!-- HTML -->
<div class="example3">
<h3>Scrolling down... </h3>
</div>
css css3 css-animations translate-animation
asked Mar 6 at 17:21
MihirMihir
4,435134880
add a comment |
I am following one blog to understand the CSS3 animations. I wanted to do marquee effect vertically using CSS3. I have followed this example. But the my issue is why there is some delay to restart the animation? When scroll came to down, it is not starting immediately from the top. Some 2,3 seconds of delay is there. How to start the animation from top immediately after the scroll ends. I am attaching gif file here to understand much better.
Code snippet:
<!DOCTYPE html>
<title>Example</title>
<!-- Styles -->
<style>
.example3
height: 200px;
overflow: hidden;
position: relative;
.example3 h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
/* Apply animation to this element */
-moz-animation: example3 15s linear infinite;
-webkit-animation: example3 15s linear infinite;
animation: example3 15s linear infinite;
/* Move it (define the animation) */
@-moz-keyframes example3
0% -moz-transform: translateY(-100%);
100% -moz-transform: translateY(100%);
@-webkit-keyframes example3
0% -webkit-transform: translateY(-100%);
100% -webkit-transform: translateY(100%);
@keyframes example3
0%
-moz-transform: translateY(-100%); /* Firefox bug fix */
-webkit-transform: translateY(-100%); /* Firefox bug fix */
transform: translateY(-100%);
100%
-moz-transform: translateY(100%); /* Firefox bug fix */
-webkit-transform: translateY(100%); /* Firefox bug fix */
transform: translateY(100%);
</style>
<!-- HTML -->
<div class="example3">
<h3>Scrolling down... </h3>
</div>
css css3 css-animations translate-animation
asked Mar 6 at 17:21
MihirMihir
4,435134880
I am following one blog to understand the CSS3 animations. I wanted to do marquee effect vertically using CSS3. I have followed this example. But the my issue is why there is some delay to restart the animation? When scroll came to down, it is not starting immediately from the top. Some 2,3 seconds of delay is there. How to start the animation from top immediately after the scroll ends. I am attaching gif file here to understand much better.
Code snippet:
<!DOCTYPE html>
<title>Example</title>
<!-- Styles -->
<style>
.example3
height: 200px;
overflow: hidden;
position: relative;
.example3 h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
/* Apply animation to this element */
-moz-animation: example3 15s linear infinite;
-webkit-animation: example3 15s linear infinite;
animation: example3 15s linear infinite;
/* Move it (define the animation) */
@-moz-keyframes example3
0% -moz-transform: translateY(-100%);
100% -moz-transform: translateY(100%);
@-webkit-keyframes example3
0% -webkit-transform: translateY(-100%);
100% -webkit-transform: translateY(100%);
@keyframes example3
0%
-moz-transform: translateY(-100%); /* Firefox bug fix */
-webkit-transform: translateY(-100%); /* Firefox bug fix */
transform: translateY(-100%);
100%
-moz-transform: translateY(100%); /* Firefox bug fix */
-webkit-transform: translateY(100%); /* Firefox bug fix */
transform: translateY(100%);
</style>
<!-- HTML -->
<div class="example3">
<h3>Scrolling down... </h3>
</div>
css css3 css-animations translate-animation
css css3 css-animations translate-animation
asked Mar 6 at 17:21
MihirMihir
4,435134880
asked Mar 6 at 17:21
MihirMihir
4,435134880
edited Mar 6 at 18:10
Mihir
asked Mar 6 at 17:21
MihirMihir
4,435134880
asked Mar 6 at 17:21
MihirMihir
4,435134880
asked Mar 6 at 17:21
MihirMihir
4,435134880
4,435134880
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
Your animation starting immidiatly, but you are start at position -100%.
If you want to start from top, then change every keyframes to 0 from -100%.
If You want to roll down immidiately from top, then try to change it equal with your text line height (-50px).
<!DOCTYPE html> <title>Example</title>
<!-- Styles -->
<style>
.example3
height: 200px;
overflow: hidden;
position: relative;
.example3 h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform: translateY(-50px);
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
/* Apply animation to this element */
-moz-animation: example3 15s linear infinite;
-webkit-animation: example3 15s linear infinite;
animation: example3 15s linear infinite;
/* Move it (define the animation) */
@-moz-keyframes example3
0%
-moz-transform: translateY(-50px);
100%
-moz-transform: translateY(100%);
@-webkit-keyframes example3
0%
-webkit-transform: translateY(-50px);
100%
-webkit-transform: translateY(100%);
@keyframes example3
0%
-moz-transform: translateY(-50px); /* Firefox bug fix */
-webkit-transform: translateY(-50px); /* Firefox bug fix */
transform: translateY(-50px);
100%
-moz-transform: translateY(100%); /* Firefox bug fix */
-webkit-transform: translateY(100%); /* Firefox bug fix */
transform: translateY(100%);
</style>
<!-- HTML -->
<div class="example3"><h3>Scrolling down...</h3></div>answered Mar 6 at 18:39
CuCu99CuCu99
114
Still there is some delay between end and start
– Mihir
Mar 6 at 19:12
add a comment |
You need to reajust the movements.
I have set 3 examples with the solution that you have: The first position, the second one, and the animation.
And then, another 3 examples with a possible solution, with the initial state, the final one, and the animation.
I have removed the overflow: hidden, and colored the element semitransparent, so that it's easily seen what is happening
.example
height: 200px;
width: 100px;
position: relative;
border: solid 1px;
margin-top: 200px;
display: inline-block;
.example h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
background-color: rgba(200, 200, 255, 0.7);
#ex1 h3
transform: translateY(-100%);
#ex2 h3
transform: translateY(100%);
#ex3 h3
animation: example 15s linear infinite;
@keyframes example
0%
transform: translateY(-100%);
100%
transform: translateY(100%);
#ex4 h3
top: -32px;
#ex5 h3
top: -20px;
transform: translateY(100%);
#ex6 h3
animation: example2 15s linear infinite;
@keyframes example2
0%
transform: translateY(-32px);
100%
transform: translateY(calc(-20px + 100%));
<div class="example" id="ex1">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex2">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex3">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex4">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex5">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex6">
<h3>Scrolling</h3>
</div>answered Mar 6 at 20:56
valsvals
45.7k857109
add a comment |
You can achieve this using CSS Position
By setting the parent container to relative and the child element to absolute, you can get the marquee effect without delays.
Below is a sample snippet do further demonstrate what do you want to happen in your marquee. Here, we used the position: relative; to the parent class wrap to make the position: absolute; of the marquee element h4 recognize it as its parent.
Going to the keyframes, we set the position of h4 to top: 0% to make it stick above the container at the start and top: calc(100% - 18px); on its peak.
Why do we need to use calc() here?
- Basically adding just 100% to its peak position will overflow the marquee outside the parent element, causing weird behaviour.
Why calc(100% - 18px)?
- 18px is the default font size of every text you add into an element, and we set the css of the marquee to padding: 0; and margin: 0 to remove extra spaces inside and outside that makes the marquee looks like we have starting delay because we only see the blank spaces unoccupied by the text inside the marquee;
.wrap
position: relative;
height: 150px;
width: 100px;
background: gray;
.wrap h4
text-align: center;
position: absolute;
top: 0%;
left: 0%;
padding: 0;
margin: 0;
background-color: red;
width: 100%;
animation: marquee 5s linear infinite;
@keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
@-moz-keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
@-webkit-keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
<div class="wrap">
<h4>Oopsie</h4>
</div>answered Mar 7 at 3:30
The Terrible ChildThe Terrible Child
1036
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%2f55028829%2fnot-able-to-make-the-css3-animation-as-continuous%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Your animation starting immidiatly, but you are start at position -100%.
If you want to start from top, then change every keyframes to 0 from -100%.
If You want to roll down immidiately from top, then try to change it equal with your text line height (-50px).
<!DOCTYPE html> <title>Example</title>
<!-- Styles -->
<style>
.example3
height: 200px;
overflow: hidden;
position: relative;
.example3 h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform: translateY(-50px);
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
/* Apply animation to this element */
-moz-animation: example3 15s linear infinite;
-webkit-animation: example3 15s linear infinite;
animation: example3 15s linear infinite;
/* Move it (define the animation) */
@-moz-keyframes example3
0%
-moz-transform: translateY(-50px);
100%
-moz-transform: translateY(100%);
@-webkit-keyframes example3
0%
-webkit-transform: translateY(-50px);
100%
-webkit-transform: translateY(100%);
@keyframes example3
0%
-moz-transform: translateY(-50px); /* Firefox bug fix */
-webkit-transform: translateY(-50px); /* Firefox bug fix */
transform: translateY(-50px);
100%
-moz-transform: translateY(100%); /* Firefox bug fix */
-webkit-transform: translateY(100%); /* Firefox bug fix */
transform: translateY(100%);
</style>
<!-- HTML -->
<div class="example3"><h3>Scrolling down...</h3></div>answered Mar 6 at 18:39
CuCu99CuCu99
114
Still there is some delay between end and start
– Mihir
Mar 6 at 19:12
add a comment |
Your animation starting immidiatly, but you are start at position -100%.
If you want to start from top, then change every keyframes to 0 from -100%.
If You want to roll down immidiately from top, then try to change it equal with your text line height (-50px).
<!DOCTYPE html> <title>Example</title>
<!-- Styles -->
<style>
.example3
height: 200px;
overflow: hidden;
position: relative;
.example3 h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform: translateY(-50px);
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
/* Apply animation to this element */
-moz-animation: example3 15s linear infinite;
-webkit-animation: example3 15s linear infinite;
animation: example3 15s linear infinite;
/* Move it (define the animation) */
@-moz-keyframes example3
0%
-moz-transform: translateY(-50px);
100%
-moz-transform: translateY(100%);
@-webkit-keyframes example3
0%
-webkit-transform: translateY(-50px);
100%
-webkit-transform: translateY(100%);
@keyframes example3
0%
-moz-transform: translateY(-50px); /* Firefox bug fix */
-webkit-transform: translateY(-50px); /* Firefox bug fix */
transform: translateY(-50px);
100%
-moz-transform: translateY(100%); /* Firefox bug fix */
-webkit-transform: translateY(100%); /* Firefox bug fix */
transform: translateY(100%);
</style>
<!-- HTML -->
<div class="example3"><h3>Scrolling down...</h3></div>answered Mar 6 at 18:39
CuCu99CuCu99
114
Still there is some delay between end and start
– Mihir
Mar 6 at 19:12
add a comment |
Your animation starting immidiatly, but you are start at position -100%.
If you want to start from top, then change every keyframes to 0 from -100%.
If You want to roll down immidiately from top, then try to change it equal with your text line height (-50px).
<!DOCTYPE html> <title>Example</title>
<!-- Styles -->
<style>
.example3
height: 200px;
overflow: hidden;
position: relative;
.example3 h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform: translateY(-50px);
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
/* Apply animation to this element */
-moz-animation: example3 15s linear infinite;
-webkit-animation: example3 15s linear infinite;
animation: example3 15s linear infinite;
/* Move it (define the animation) */
@-moz-keyframes example3
0%
-moz-transform: translateY(-50px);
100%
-moz-transform: translateY(100%);
@-webkit-keyframes example3
0%
-webkit-transform: translateY(-50px);
100%
-webkit-transform: translateY(100%);
@keyframes example3
0%
-moz-transform: translateY(-50px); /* Firefox bug fix */
-webkit-transform: translateY(-50px); /* Firefox bug fix */
transform: translateY(-50px);
100%
-moz-transform: translateY(100%); /* Firefox bug fix */
-webkit-transform: translateY(100%); /* Firefox bug fix */
transform: translateY(100%);
</style>
<!-- HTML -->
<div class="example3"><h3>Scrolling down...</h3></div>answered Mar 6 at 18:39
CuCu99CuCu99
114
Your animation starting immidiatly, but you are start at position -100%.
If you want to start from top, then change every keyframes to 0 from -100%.
If You want to roll down immidiately from top, then try to change it equal with your text line height (-50px).
<!DOCTYPE html> <title>Example</title>
<!-- Styles -->
<style>
.example3
height: 200px;
overflow: hidden;
position: relative;
.example3 h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform: translateY(-50px);
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
/* Apply animation to this element */
-moz-animation: example3 15s linear infinite;
-webkit-animation: example3 15s linear infinite;
animation: example3 15s linear infinite;
/* Move it (define the animation) */
@-moz-keyframes example3
0%
-moz-transform: translateY(-50px);
100%
-moz-transform: translateY(100%);
@-webkit-keyframes example3
0%
-webkit-transform: translateY(-50px);
100%
-webkit-transform: translateY(100%);
@keyframes example3
0%
-moz-transform: translateY(-50px); /* Firefox bug fix */
-webkit-transform: translateY(-50px); /* Firefox bug fix */
transform: translateY(-50px);
100%
-moz-transform: translateY(100%); /* Firefox bug fix */
-webkit-transform: translateY(100%); /* Firefox bug fix */
transform: translateY(100%);
</style>
<!-- HTML -->
<div class="example3"><h3>Scrolling down...</h3></div><!DOCTYPE html> <title>Example</title>
<!-- Styles -->
<style>
.example3
height: 200px;
overflow: hidden;
position: relative;
.example3 h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform: translateY(-50px);
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
/* Apply animation to this element */
-moz-animation: example3 15s linear infinite;
-webkit-animation: example3 15s linear infinite;
animation: example3 15s linear infinite;
/* Move it (define the animation) */
@-moz-keyframes example3
0%
-moz-transform: translateY(-50px);
100%
-moz-transform: translateY(100%);
@-webkit-keyframes example3
0%
-webkit-transform: translateY(-50px);
100%
-webkit-transform: translateY(100%);
@keyframes example3
0%
-moz-transform: translateY(-50px); /* Firefox bug fix */
-webkit-transform: translateY(-50px); /* Firefox bug fix */
transform: translateY(-50px);
100%
-moz-transform: translateY(100%); /* Firefox bug fix */
-webkit-transform: translateY(100%); /* Firefox bug fix */
transform: translateY(100%);
</style>
<!-- HTML -->
<div class="example3"><h3>Scrolling down...</h3></div><!DOCTYPE html> <title>Example</title>
<!-- Styles -->
<style>
.example3
height: 200px;
overflow: hidden;
position: relative;
.example3 h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform: translateY(-50px);
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
/* Apply animation to this element */
-moz-animation: example3 15s linear infinite;
-webkit-animation: example3 15s linear infinite;
animation: example3 15s linear infinite;
/* Move it (define the animation) */
@-moz-keyframes example3
0%
-moz-transform: translateY(-50px);
100%
-moz-transform: translateY(100%);
@-webkit-keyframes example3
0%
-webkit-transform: translateY(-50px);
100%
-webkit-transform: translateY(100%);
@keyframes example3
0%
-moz-transform: translateY(-50px); /* Firefox bug fix */
-webkit-transform: translateY(-50px); /* Firefox bug fix */
transform: translateY(-50px);
100%
-moz-transform: translateY(100%); /* Firefox bug fix */
-webkit-transform: translateY(100%); /* Firefox bug fix */
transform: translateY(100%);
</style>
<!-- HTML -->
<div class="example3"><h3>Scrolling down...</h3></div>answered Mar 6 at 18:39
CuCu99CuCu99
114
edited Mar 6 at 18:46
answered Mar 6 at 18:39
CuCu99CuCu99
114
answered Mar 6 at 18:39
CuCu99CuCu99
114
answered Mar 6 at 18:39
CuCu99CuCu99
114
114
Still there is some delay between end and start
– Mihir
Mar 6 at 19:12
add a comment |
Still there is some delay between end and start
– Mihir
Mar 6 at 19:12
Still there is some delay between end and start
– Mihir
Mar 6 at 19:12
Still there is some delay between end and start
– Mihir
Mar 6 at 19:12
add a comment |
You need to reajust the movements.
I have set 3 examples with the solution that you have: The first position, the second one, and the animation.
And then, another 3 examples with a possible solution, with the initial state, the final one, and the animation.
I have removed the overflow: hidden, and colored the element semitransparent, so that it's easily seen what is happening
.example
height: 200px;
width: 100px;
position: relative;
border: solid 1px;
margin-top: 200px;
display: inline-block;
.example h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
background-color: rgba(200, 200, 255, 0.7);
#ex1 h3
transform: translateY(-100%);
#ex2 h3
transform: translateY(100%);
#ex3 h3
animation: example 15s linear infinite;
@keyframes example
0%
transform: translateY(-100%);
100%
transform: translateY(100%);
#ex4 h3
top: -32px;
#ex5 h3
top: -20px;
transform: translateY(100%);
#ex6 h3
animation: example2 15s linear infinite;
@keyframes example2
0%
transform: translateY(-32px);
100%
transform: translateY(calc(-20px + 100%));
<div class="example" id="ex1">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex2">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex3">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex4">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex5">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex6">
<h3>Scrolling</h3>
</div>answered Mar 6 at 20:56
valsvals
45.7k857109
add a comment |
You need to reajust the movements.
I have set 3 examples with the solution that you have: The first position, the second one, and the animation.
And then, another 3 examples with a possible solution, with the initial state, the final one, and the animation.
I have removed the overflow: hidden, and colored the element semitransparent, so that it's easily seen what is happening
.example
height: 200px;
width: 100px;
position: relative;
border: solid 1px;
margin-top: 200px;
display: inline-block;
.example h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
background-color: rgba(200, 200, 255, 0.7);
#ex1 h3
transform: translateY(-100%);
#ex2 h3
transform: translateY(100%);
#ex3 h3
animation: example 15s linear infinite;
@keyframes example
0%
transform: translateY(-100%);
100%
transform: translateY(100%);
#ex4 h3
top: -32px;
#ex5 h3
top: -20px;
transform: translateY(100%);
#ex6 h3
animation: example2 15s linear infinite;
@keyframes example2
0%
transform: translateY(-32px);
100%
transform: translateY(calc(-20px + 100%));
<div class="example" id="ex1">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex2">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex3">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex4">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex5">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex6">
<h3>Scrolling</h3>
</div>answered Mar 6 at 20:56
valsvals
45.7k857109
add a comment |
You need to reajust the movements.
I have set 3 examples with the solution that you have: The first position, the second one, and the animation.
And then, another 3 examples with a possible solution, with the initial state, the final one, and the animation.
I have removed the overflow: hidden, and colored the element semitransparent, so that it's easily seen what is happening
.example
height: 200px;
width: 100px;
position: relative;
border: solid 1px;
margin-top: 200px;
display: inline-block;
.example h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
background-color: rgba(200, 200, 255, 0.7);
#ex1 h3
transform: translateY(-100%);
#ex2 h3
transform: translateY(100%);
#ex3 h3
animation: example 15s linear infinite;
@keyframes example
0%
transform: translateY(-100%);
100%
transform: translateY(100%);
#ex4 h3
top: -32px;
#ex5 h3
top: -20px;
transform: translateY(100%);
#ex6 h3
animation: example2 15s linear infinite;
@keyframes example2
0%
transform: translateY(-32px);
100%
transform: translateY(calc(-20px + 100%));
<div class="example" id="ex1">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex2">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex3">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex4">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex5">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex6">
<h3>Scrolling</h3>
</div>answered Mar 6 at 20:56
valsvals
45.7k857109
You need to reajust the movements.
I have set 3 examples with the solution that you have: The first position, the second one, and the animation.
And then, another 3 examples with a possible solution, with the initial state, the final one, and the animation.
I have removed the overflow: hidden, and colored the element semitransparent, so that it's easily seen what is happening
.example
height: 200px;
width: 100px;
position: relative;
border: solid 1px;
margin-top: 200px;
display: inline-block;
.example h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
background-color: rgba(200, 200, 255, 0.7);
#ex1 h3
transform: translateY(-100%);
#ex2 h3
transform: translateY(100%);
#ex3 h3
animation: example 15s linear infinite;
@keyframes example
0%
transform: translateY(-100%);
100%
transform: translateY(100%);
#ex4 h3
top: -32px;
#ex5 h3
top: -20px;
transform: translateY(100%);
#ex6 h3
animation: example2 15s linear infinite;
@keyframes example2
0%
transform: translateY(-32px);
100%
transform: translateY(calc(-20px + 100%));
<div class="example" id="ex1">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex2">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex3">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex4">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex5">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex6">
<h3>Scrolling</h3>
</div>.example
height: 200px;
width: 100px;
position: relative;
border: solid 1px;
margin-top: 200px;
display: inline-block;
.example h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
background-color: rgba(200, 200, 255, 0.7);
#ex1 h3
transform: translateY(-100%);
#ex2 h3
transform: translateY(100%);
#ex3 h3
animation: example 15s linear infinite;
@keyframes example
0%
transform: translateY(-100%);
100%
transform: translateY(100%);
#ex4 h3
top: -32px;
#ex5 h3
top: -20px;
transform: translateY(100%);
#ex6 h3
animation: example2 15s linear infinite;
@keyframes example2
0%
transform: translateY(-32px);
100%
transform: translateY(calc(-20px + 100%));
<div class="example" id="ex1">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex2">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex3">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex4">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex5">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex6">
<h3>Scrolling</h3>
</div>.example
height: 200px;
width: 100px;
position: relative;
border: solid 1px;
margin-top: 200px;
display: inline-block;
.example h3
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
background-color: rgba(200, 200, 255, 0.7);
#ex1 h3
transform: translateY(-100%);
#ex2 h3
transform: translateY(100%);
#ex3 h3
animation: example 15s linear infinite;
@keyframes example
0%
transform: translateY(-100%);
100%
transform: translateY(100%);
#ex4 h3
top: -32px;
#ex5 h3
top: -20px;
transform: translateY(100%);
#ex6 h3
animation: example2 15s linear infinite;
@keyframes example2
0%
transform: translateY(-32px);
100%
transform: translateY(calc(-20px + 100%));
<div class="example" id="ex1">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex2">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex3">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex4">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex5">
<h3>Scrolling</h3>
</div>
<div class="example" id="ex6">
<h3>Scrolling</h3>
</div>answered Mar 6 at 20:56
valsvals
45.7k857109
answered Mar 6 at 20:56
valsvals
45.7k857109
answered Mar 6 at 20:56
valsvals
45.7k857109
answered Mar 6 at 20:56
valsvals
45.7k857109
45.7k857109
add a comment |
add a comment |
You can achieve this using CSS Position
By setting the parent container to relative and the child element to absolute, you can get the marquee effect without delays.
Below is a sample snippet do further demonstrate what do you want to happen in your marquee. Here, we used the position: relative; to the parent class wrap to make the position: absolute; of the marquee element h4 recognize it as its parent.
Going to the keyframes, we set the position of h4 to top: 0% to make it stick above the container at the start and top: calc(100% - 18px); on its peak.
Why do we need to use calc() here?
- Basically adding just 100% to its peak position will overflow the marquee outside the parent element, causing weird behaviour.
Why calc(100% - 18px)?
- 18px is the default font size of every text you add into an element, and we set the css of the marquee to padding: 0; and margin: 0 to remove extra spaces inside and outside that makes the marquee looks like we have starting delay because we only see the blank spaces unoccupied by the text inside the marquee;
.wrap
position: relative;
height: 150px;
width: 100px;
background: gray;
.wrap h4
text-align: center;
position: absolute;
top: 0%;
left: 0%;
padding: 0;
margin: 0;
background-color: red;
width: 100%;
animation: marquee 5s linear infinite;
@keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
@-moz-keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
@-webkit-keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
<div class="wrap">
<h4>Oopsie</h4>
</div>answered Mar 7 at 3:30
The Terrible ChildThe Terrible Child
1036
add a comment |
You can achieve this using CSS Position
By setting the parent container to relative and the child element to absolute, you can get the marquee effect without delays.
Below is a sample snippet do further demonstrate what do you want to happen in your marquee. Here, we used the position: relative; to the parent class wrap to make the position: absolute; of the marquee element h4 recognize it as its parent.
Going to the keyframes, we set the position of h4 to top: 0% to make it stick above the container at the start and top: calc(100% - 18px); on its peak.
Why do we need to use calc() here?
- Basically adding just 100% to its peak position will overflow the marquee outside the parent element, causing weird behaviour.
Why calc(100% - 18px)?
- 18px is the default font size of every text you add into an element, and we set the css of the marquee to padding: 0; and margin: 0 to remove extra spaces inside and outside that makes the marquee looks like we have starting delay because we only see the blank spaces unoccupied by the text inside the marquee;
.wrap
position: relative;
height: 150px;
width: 100px;
background: gray;
.wrap h4
text-align: center;
position: absolute;
top: 0%;
left: 0%;
padding: 0;
margin: 0;
background-color: red;
width: 100%;
animation: marquee 5s linear infinite;
@keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
@-moz-keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
@-webkit-keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
<div class="wrap">
<h4>Oopsie</h4>
</div>answered Mar 7 at 3:30
The Terrible ChildThe Terrible Child
1036
add a comment |
You can achieve this using CSS Position
By setting the parent container to relative and the child element to absolute, you can get the marquee effect without delays.
Below is a sample snippet do further demonstrate what do you want to happen in your marquee. Here, we used the position: relative; to the parent class wrap to make the position: absolute; of the marquee element h4 recognize it as its parent.
Going to the keyframes, we set the position of h4 to top: 0% to make it stick above the container at the start and top: calc(100% - 18px); on its peak.
Why do we need to use calc() here?
- Basically adding just 100% to its peak position will overflow the marquee outside the parent element, causing weird behaviour.
Why calc(100% - 18px)?
- 18px is the default font size of every text you add into an element, and we set the css of the marquee to padding: 0; and margin: 0 to remove extra spaces inside and outside that makes the marquee looks like we have starting delay because we only see the blank spaces unoccupied by the text inside the marquee;
.wrap
position: relative;
height: 150px;
width: 100px;
background: gray;
.wrap h4
text-align: center;
position: absolute;
top: 0%;
left: 0%;
padding: 0;
margin: 0;
background-color: red;
width: 100%;
animation: marquee 5s linear infinite;
@keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
@-moz-keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
@-webkit-keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
<div class="wrap">
<h4>Oopsie</h4>
</div>answered Mar 7 at 3:30
The Terrible ChildThe Terrible Child
1036
You can achieve this using CSS Position
By setting the parent container to relative and the child element to absolute, you can get the marquee effect without delays.
Below is a sample snippet do further demonstrate what do you want to happen in your marquee. Here, we used the position: relative; to the parent class wrap to make the position: absolute; of the marquee element h4 recognize it as its parent.
Going to the keyframes, we set the position of h4 to top: 0% to make it stick above the container at the start and top: calc(100% - 18px); on its peak.
Why do we need to use calc() here?
- Basically adding just 100% to its peak position will overflow the marquee outside the parent element, causing weird behaviour.
Why calc(100% - 18px)?
- 18px is the default font size of every text you add into an element, and we set the css of the marquee to padding: 0; and margin: 0 to remove extra spaces inside and outside that makes the marquee looks like we have starting delay because we only see the blank spaces unoccupied by the text inside the marquee;
.wrap
position: relative;
height: 150px;
width: 100px;
background: gray;
.wrap h4
text-align: center;
position: absolute;
top: 0%;
left: 0%;
padding: 0;
margin: 0;
background-color: red;
width: 100%;
animation: marquee 5s linear infinite;
@keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
@-moz-keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
@-webkit-keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
<div class="wrap">
<h4>Oopsie</h4>
</div>.wrap
position: relative;
height: 150px;
width: 100px;
background: gray;
.wrap h4
text-align: center;
position: absolute;
top: 0%;
left: 0%;
padding: 0;
margin: 0;
background-color: red;
width: 100%;
animation: marquee 5s linear infinite;
@keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
@-moz-keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
@-webkit-keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
<div class="wrap">
<h4>Oopsie</h4>
</div>.wrap
position: relative;
height: 150px;
width: 100px;
background: gray;
.wrap h4
text-align: center;
position: absolute;
top: 0%;
left: 0%;
padding: 0;
margin: 0;
background-color: red;
width: 100%;
animation: marquee 5s linear infinite;
@keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
@-moz-keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
@-webkit-keyframes marquee
0%
top: 0%;
100%
top: calc(100% - 18px);
<div class="wrap">
<h4>Oopsie</h4>
</div>answered Mar 7 at 3:30
The Terrible ChildThe Terrible Child
1036
edited Mar 8 at 1:31
answered Mar 7 at 3:30
The Terrible ChildThe Terrible Child
1036
answered Mar 7 at 3:30
The Terrible ChildThe Terrible Child
1036
answered Mar 7 at 3:30
The Terrible ChildThe Terrible Child
1036
1036
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%2f55028829%2fnot-able-to-make-the-css3-animation-as-continuous%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
