CSS text paragraph animation keeps slowing after running one after another paragraphHow to keep styles after animation?CSS Animation property stays after animatingIs there anyway to animate an ellipsis with CSS animations?CSS animation delay in repeatingHow to make blinking/flashing text with CSS 3?CSS: Animation vs. TransitionCSS: How to keep a hover transition smooth while another animation is runningcustom css animation breaking for mobile browsersText positioning when using -webkit-transitioncss animation white-space: nowrap;
Negative Resistance
Can a stored procedure reference the database in which it is stored?
All ASCII characters with a given bit count
Does the damage from the Absorb Elements spell apply to your next attack, or to your first attack on your next turn?
What is the most expensive material in the world that could be used to create Pun-Pun's lute?
What was Apollo 13's "Little Jolt" after MECO?
"My boss was furious with me and I have been fired" vs. "My boss was furious with me and I was fired"
Double-nominative constructions and “von”
A strange hotel
Extracting Dirichlet series coefficients
Work requires me to come in early to start computer but wont let me clock in to get paid for it
Combinatorics problem, right solution?
How exactly does Hawking radiation decrease the mass of black holes?
Is Electric Central Heating worth it if using Solar Panels?
Why do games have consumables?
Which big number is bigger?
What does MLD stand for?
"The cow" OR "a cow" OR "cows" in this context
Why didn't the Space Shuttle bounce back into space as many times as possible so as to lose a lot of kinetic energy up there?
How do I check if a string is entirely made of the same substring?
As an international instructor, should I openly talk about my accent?
Can I criticise the more senior developers around me for not writing clean code?
Drawing a german abacus as in the books of Adam Ries
Difficulty accessing OpenType ligatures with LuaLaTex and fontspec
CSS text paragraph animation keeps slowing after running one after another paragraph
How to keep styles after animation?CSS Animation property stays after animatingIs there anyway to animate an ellipsis with CSS animations?CSS animation delay in repeatingHow to make blinking/flashing text with CSS 3?CSS: Animation vs. TransitionCSS: How to keep a hover transition smooth while another animation is runningcustom css animation breaking for mobile browsersText positioning when using -webkit-transitioncss animation white-space: nowrap;
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I'm new with CSS animation, been watching from some tutorials, but still need lot of practices and confused how it works with "steps(60, end)".
All I know if I put 60 then the text is quicker.
So I have 5 paragraphs which I want to run 1 paragraph each time after another for a quick run like 1 sec, it was working, but after the third, fourth and fifth paragraph, it's getting slower, if I add "animation: text-2 2s steps(60, end);" for each paragraph, it's running quick, but it doesn't run one after another. What am I doing wrong here?
.p1
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-1 1s steps(60, end);
.p2
white-space: nowrap;
overflow: hidden;
width: 100px;
border: 1px solid green;
animation: text-2 2s steps(60, end);
.p3
white-space: nowrap;
overflow: hidden;
width: 110px;
border: 1px solid green;
animation: text-2 4s steps(60, end);
.p4
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-2 8s steps(60, end);
.p5
white-space: nowrap;
overflow: hidden;
width: 82px;
border: 1px solid green;
animation: text-2 16s steps(60, end);
@keyframes text-1
from
width: 0;
@keyframes text-2
0%
width: 0;
50%
width: 0;
100%
width: 100;
<div class="wrapper">
<div class="first-row">
<p class="p1">Paragraph 1</p>
<div class="p2">
<img src="#">
<span>Paragraph 2</span>
</div>
</div>
<div class="second-row">
<p class="p3">Paragraph 3 <span> text</span></p>
<p class="p4">Paragraph 4</p>
</div>
<div class="third-row">
<p class="p5">Paragraph 5 <span>text</span></p>
</div
</div>css-animations
asked Mar 9 at 7:30
UdzzzzUdzzzz
2417
add a comment |
I'm new with CSS animation, been watching from some tutorials, but still need lot of practices and confused how it works with "steps(60, end)".
All I know if I put 60 then the text is quicker.
So I have 5 paragraphs which I want to run 1 paragraph each time after another for a quick run like 1 sec, it was working, but after the third, fourth and fifth paragraph, it's getting slower, if I add "animation: text-2 2s steps(60, end);" for each paragraph, it's running quick, but it doesn't run one after another. What am I doing wrong here?
.p1
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-1 1s steps(60, end);
.p2
white-space: nowrap;
overflow: hidden;
width: 100px;
border: 1px solid green;
animation: text-2 2s steps(60, end);
.p3
white-space: nowrap;
overflow: hidden;
width: 110px;
border: 1px solid green;
animation: text-2 4s steps(60, end);
.p4
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-2 8s steps(60, end);
.p5
white-space: nowrap;
overflow: hidden;
width: 82px;
border: 1px solid green;
animation: text-2 16s steps(60, end);
@keyframes text-1
from
width: 0;
@keyframes text-2
0%
width: 0;
50%
width: 0;
100%
width: 100;
<div class="wrapper">
<div class="first-row">
<p class="p1">Paragraph 1</p>
<div class="p2">
<img src="#">
<span>Paragraph 2</span>
</div>
</div>
<div class="second-row">
<p class="p3">Paragraph 3 <span> text</span></p>
<p class="p4">Paragraph 4</p>
</div>
<div class="third-row">
<p class="p5">Paragraph 5 <span>text</span></p>
</div
</div>css-animations
asked Mar 9 at 7:30
UdzzzzUdzzzz
2417
add a comment |
I'm new with CSS animation, been watching from some tutorials, but still need lot of practices and confused how it works with "steps(60, end)".
All I know if I put 60 then the text is quicker.
So I have 5 paragraphs which I want to run 1 paragraph each time after another for a quick run like 1 sec, it was working, but after the third, fourth and fifth paragraph, it's getting slower, if I add "animation: text-2 2s steps(60, end);" for each paragraph, it's running quick, but it doesn't run one after another. What am I doing wrong here?
.p1
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-1 1s steps(60, end);
.p2
white-space: nowrap;
overflow: hidden;
width: 100px;
border: 1px solid green;
animation: text-2 2s steps(60, end);
.p3
white-space: nowrap;
overflow: hidden;
width: 110px;
border: 1px solid green;
animation: text-2 4s steps(60, end);
.p4
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-2 8s steps(60, end);
.p5
white-space: nowrap;
overflow: hidden;
width: 82px;
border: 1px solid green;
animation: text-2 16s steps(60, end);
@keyframes text-1
from
width: 0;
@keyframes text-2
0%
width: 0;
50%
width: 0;
100%
width: 100;
<div class="wrapper">
<div class="first-row">
<p class="p1">Paragraph 1</p>
<div class="p2">
<img src="#">
<span>Paragraph 2</span>
</div>
</div>
<div class="second-row">
<p class="p3">Paragraph 3 <span> text</span></p>
<p class="p4">Paragraph 4</p>
</div>
<div class="third-row">
<p class="p5">Paragraph 5 <span>text</span></p>
</div
</div>css-animations
asked Mar 9 at 7:30
UdzzzzUdzzzz
2417
I'm new with CSS animation, been watching from some tutorials, but still need lot of practices and confused how it works with "steps(60, end)".
All I know if I put 60 then the text is quicker.
So I have 5 paragraphs which I want to run 1 paragraph each time after another for a quick run like 1 sec, it was working, but after the third, fourth and fifth paragraph, it's getting slower, if I add "animation: text-2 2s steps(60, end);" for each paragraph, it's running quick, but it doesn't run one after another. What am I doing wrong here?
.p1
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-1 1s steps(60, end);
.p2
white-space: nowrap;
overflow: hidden;
width: 100px;
border: 1px solid green;
animation: text-2 2s steps(60, end);
.p3
white-space: nowrap;
overflow: hidden;
width: 110px;
border: 1px solid green;
animation: text-2 4s steps(60, end);
.p4
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-2 8s steps(60, end);
.p5
white-space: nowrap;
overflow: hidden;
width: 82px;
border: 1px solid green;
animation: text-2 16s steps(60, end);
@keyframes text-1
from
width: 0;
@keyframes text-2
0%
width: 0;
50%
width: 0;
100%
width: 100;
<div class="wrapper">
<div class="first-row">
<p class="p1">Paragraph 1</p>
<div class="p2">
<img src="#">
<span>Paragraph 2</span>
</div>
</div>
<div class="second-row">
<p class="p3">Paragraph 3 <span> text</span></p>
<p class="p4">Paragraph 4</p>
</div>
<div class="third-row">
<p class="p5">Paragraph 5 <span>text</span></p>
</div
</div>.p1
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-1 1s steps(60, end);
.p2
white-space: nowrap;
overflow: hidden;
width: 100px;
border: 1px solid green;
animation: text-2 2s steps(60, end);
.p3
white-space: nowrap;
overflow: hidden;
width: 110px;
border: 1px solid green;
animation: text-2 4s steps(60, end);
.p4
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-2 8s steps(60, end);
.p5
white-space: nowrap;
overflow: hidden;
width: 82px;
border: 1px solid green;
animation: text-2 16s steps(60, end);
@keyframes text-1
from
width: 0;
@keyframes text-2
0%
width: 0;
50%
width: 0;
100%
width: 100;
<div class="wrapper">
<div class="first-row">
<p class="p1">Paragraph 1</p>
<div class="p2">
<img src="#">
<span>Paragraph 2</span>
</div>
</div>
<div class="second-row">
<p class="p3">Paragraph 3 <span> text</span></p>
<p class="p4">Paragraph 4</p>
</div>
<div class="third-row">
<p class="p5">Paragraph 5 <span>text</span></p>
</div
</div>.p1
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-1 1s steps(60, end);
.p2
white-space: nowrap;
overflow: hidden;
width: 100px;
border: 1px solid green;
animation: text-2 2s steps(60, end);
.p3
white-space: nowrap;
overflow: hidden;
width: 110px;
border: 1px solid green;
animation: text-2 4s steps(60, end);
.p4
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-2 8s steps(60, end);
.p5
white-space: nowrap;
overflow: hidden;
width: 82px;
border: 1px solid green;
animation: text-2 16s steps(60, end);
@keyframes text-1
from
width: 0;
@keyframes text-2
0%
width: 0;
50%
width: 0;
100%
width: 100;
<div class="wrapper">
<div class="first-row">
<p class="p1">Paragraph 1</p>
<div class="p2">
<img src="#">
<span>Paragraph 2</span>
</div>
</div>
<div class="second-row">
<p class="p3">Paragraph 3 <span> text</span></p>
<p class="p4">Paragraph 4</p>
</div>
<div class="third-row">
<p class="p5">Paragraph 5 <span>text</span></p>
</div
</div>css-animations
css-animations
asked Mar 9 at 7:30
UdzzzzUdzzzz
2417
asked Mar 9 at 7:30
UdzzzzUdzzzz
2417
asked Mar 9 at 7:30
UdzzzzUdzzzz
2417
asked Mar 9 at 7:30
UdzzzzUdzzzz
2417
asked Mar 9 at 7:30
UdzzzzUdzzzz
2417
2417
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
//You can try this css code
.p1
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-1 1s steps(60, end);
.p2
white-space: nowrap;
overflow: hidden;
width: 100px;
border: 1px solid green;
animation: text-2 2s steps(120, end);
.p3
white-space: nowrap;
overflow: hidden;
width: 110px;
border: 1px solid green;
animation: text-2 3s steps(180, end);
.p4
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-2 4s steps(240, end);
.p5
white-space: nowrap;
overflow: hidden;
width: 82px;
border: 1px solid green;
animation: text-2 5s steps(300, end);
@keyframes text-1
from
width: 0;
@keyframes text-2
0%
width: 0;
50%
width: 0;
100%
width: 100;
answered Mar 9 at 8:24
tebbe93tebbe93
445
Thanks, I tried it, text is quicker, but it doesn't work as I expected, the text is still slow at the end and running before other paragraph finish.
– Udzzzz
Mar 10 at 1:18
this it fact here
– tebbe93
Mar 10 at 17:20
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%2f55075061%2fcss-text-paragraph-animation-keeps-slowing-after-running-one-after-another-parag%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
//You can try this css code
.p1
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-1 1s steps(60, end);
.p2
white-space: nowrap;
overflow: hidden;
width: 100px;
border: 1px solid green;
animation: text-2 2s steps(120, end);
.p3
white-space: nowrap;
overflow: hidden;
width: 110px;
border: 1px solid green;
animation: text-2 3s steps(180, end);
.p4
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-2 4s steps(240, end);
.p5
white-space: nowrap;
overflow: hidden;
width: 82px;
border: 1px solid green;
animation: text-2 5s steps(300, end);
@keyframes text-1
from
width: 0;
@keyframes text-2
0%
width: 0;
50%
width: 0;
100%
width: 100;
answered Mar 9 at 8:24
tebbe93tebbe93
445
Thanks, I tried it, text is quicker, but it doesn't work as I expected, the text is still slow at the end and running before other paragraph finish.
– Udzzzz
Mar 10 at 1:18
this it fact here
– tebbe93
Mar 10 at 17:20
add a comment |
//You can try this css code
.p1
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-1 1s steps(60, end);
.p2
white-space: nowrap;
overflow: hidden;
width: 100px;
border: 1px solid green;
animation: text-2 2s steps(120, end);
.p3
white-space: nowrap;
overflow: hidden;
width: 110px;
border: 1px solid green;
animation: text-2 3s steps(180, end);
.p4
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-2 4s steps(240, end);
.p5
white-space: nowrap;
overflow: hidden;
width: 82px;
border: 1px solid green;
animation: text-2 5s steps(300, end);
@keyframes text-1
from
width: 0;
@keyframes text-2
0%
width: 0;
50%
width: 0;
100%
width: 100;
answered Mar 9 at 8:24
tebbe93tebbe93
445
Thanks, I tried it, text is quicker, but it doesn't work as I expected, the text is still slow at the end and running before other paragraph finish.
– Udzzzz
Mar 10 at 1:18
this it fact here
– tebbe93
Mar 10 at 17:20
add a comment |
//You can try this css code
.p1
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-1 1s steps(60, end);
.p2
white-space: nowrap;
overflow: hidden;
width: 100px;
border: 1px solid green;
animation: text-2 2s steps(120, end);
.p3
white-space: nowrap;
overflow: hidden;
width: 110px;
border: 1px solid green;
animation: text-2 3s steps(180, end);
.p4
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-2 4s steps(240, end);
.p5
white-space: nowrap;
overflow: hidden;
width: 82px;
border: 1px solid green;
animation: text-2 5s steps(300, end);
@keyframes text-1
from
width: 0;
@keyframes text-2
0%
width: 0;
50%
width: 0;
100%
width: 100;
answered Mar 9 at 8:24
tebbe93tebbe93
445
//You can try this css code
.p1
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-1 1s steps(60, end);
.p2
white-space: nowrap;
overflow: hidden;
width: 100px;
border: 1px solid green;
animation: text-2 2s steps(120, end);
.p3
white-space: nowrap;
overflow: hidden;
width: 110px;
border: 1px solid green;
animation: text-2 3s steps(180, end);
.p4
white-space: nowrap;
overflow: hidden;
width: 80px;
border: 1px solid green;
animation: text-2 4s steps(240, end);
.p5
white-space: nowrap;
overflow: hidden;
width: 82px;
border: 1px solid green;
animation: text-2 5s steps(300, end);
@keyframes text-1
from
width: 0;
@keyframes text-2
0%
width: 0;
50%
width: 0;
100%
width: 100;
answered Mar 9 at 8:24
tebbe93tebbe93
445
answered Mar 9 at 8:24
tebbe93tebbe93
445
answered Mar 9 at 8:24
tebbe93tebbe93
445
answered Mar 9 at 8:24
tebbe93tebbe93
445
445
Thanks, I tried it, text is quicker, but it doesn't work as I expected, the text is still slow at the end and running before other paragraph finish.
– Udzzzz
Mar 10 at 1:18
this it fact here
– tebbe93
Mar 10 at 17:20
add a comment |
Thanks, I tried it, text is quicker, but it doesn't work as I expected, the text is still slow at the end and running before other paragraph finish.
– Udzzzz
Mar 10 at 1:18
this it fact here
– tebbe93
Mar 10 at 17:20
Thanks, I tried it, text is quicker, but it doesn't work as I expected, the text is still slow at the end and running before other paragraph finish.
– Udzzzz
Mar 10 at 1:18
Thanks, I tried it, text is quicker, but it doesn't work as I expected, the text is still slow at the end and running before other paragraph finish.
– Udzzzz
Mar 10 at 1:18
this it fact here
– tebbe93
Mar 10 at 17:20
this it fact here
– tebbe93
Mar 10 at 17:20
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%2f55075061%2fcss-text-paragraph-animation-keeps-slowing-after-running-one-after-another-parag%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
