Smooth animation start
I've got an animation that just moves from top to the bottom.
0 - top
25 - middle
50 - bottom
75 - middle
100 - top
I've made it endless using javascript but every time it stops and starts again it blinks (disappears and appears for 1 second).
Is there a way to make this action smooth without blinking at start?
javascript css animation
asked Nov 12 '18 at 17:22
DesiignerDesiigner
37419
add a comment |
I've got an animation that just moves from top to the bottom.
0 - top
25 - middle
50 - bottom
75 - middle
100 - top
I've made it endless using javascript but every time it stops and starts again it blinks (disappears and appears for 1 second).
Is there a way to make this action smooth without blinking at start?
javascript css animation
asked Nov 12 '18 at 17:22
DesiignerDesiigner
37419
4
Help people help you by giving them a minimal example to reproduce the issue. Sounds like something that should be done in just css anyway.
– Chris W.
Nov 12 '18 at 17:25
@ChrisW. I wish I could but the problem is I'm working with images on localhost and javascript works with a specified path. Tried to put in into a jsfiddle but it didn't work though :(
– Desiigner
Nov 12 '18 at 17:26
You can just use other images. We don't need an exact replica of what you're doing, we just need a minimal working example to show what's going wrong. You could even just use adivwith abackground-colorinstead of an image
– vrugtehagel
Nov 12 '18 at 17:30
Can you show us your code? The animation in css would be nice.
– codeWithMe
Nov 12 '18 at 17:31
add a comment |
I've got an animation that just moves from top to the bottom.
0 - top
25 - middle
50 - bottom
75 - middle
100 - top
I've made it endless using javascript but every time it stops and starts again it blinks (disappears and appears for 1 second).
Is there a way to make this action smooth without blinking at start?
javascript css animation
asked Nov 12 '18 at 17:22
DesiignerDesiigner
37419
I've got an animation that just moves from top to the bottom.
0 - top
25 - middle
50 - bottom
75 - middle
100 - top
I've made it endless using javascript but every time it stops and starts again it blinks (disappears and appears for 1 second).
Is there a way to make this action smooth without blinking at start?
javascript css animation
javascript css animation
asked Nov 12 '18 at 17:22
DesiignerDesiigner
37419
asked Nov 12 '18 at 17:22
DesiignerDesiigner
37419
asked Nov 12 '18 at 17:22
DesiignerDesiigner
37419
asked Nov 12 '18 at 17:22
DesiignerDesiigner
37419
asked Nov 12 '18 at 17:22
DesiignerDesiigner
37419
37419
4
Help people help you by giving them a minimal example to reproduce the issue. Sounds like something that should be done in just css anyway.
– Chris W.
Nov 12 '18 at 17:25
@ChrisW. I wish I could but the problem is I'm working with images on localhost and javascript works with a specified path. Tried to put in into a jsfiddle but it didn't work though :(
– Desiigner
Nov 12 '18 at 17:26
You can just use other images. We don't need an exact replica of what you're doing, we just need a minimal working example to show what's going wrong. You could even just use adivwith abackground-colorinstead of an image
– vrugtehagel
Nov 12 '18 at 17:30
Can you show us your code? The animation in css would be nice.
– codeWithMe
Nov 12 '18 at 17:31
add a comment |
4
Help people help you by giving them a minimal example to reproduce the issue. Sounds like something that should be done in just css anyway.
– Chris W.
Nov 12 '18 at 17:25
@ChrisW. I wish I could but the problem is I'm working with images on localhost and javascript works with a specified path. Tried to put in into a jsfiddle but it didn't work though :(
– Desiigner
Nov 12 '18 at 17:26
You can just use other images. We don't need an exact replica of what you're doing, we just need a minimal working example to show what's going wrong. You could even just use adivwith abackground-colorinstead of an image
– vrugtehagel
Nov 12 '18 at 17:30
Can you show us your code? The animation in css would be nice.
– codeWithMe
Nov 12 '18 at 17:31
4
4
Help people help you by giving them a minimal example to reproduce the issue. Sounds like something that should be done in just css anyway.
– Chris W.
Nov 12 '18 at 17:25
Help people help you by giving them a minimal example to reproduce the issue. Sounds like something that should be done in just css anyway.
– Chris W.
Nov 12 '18 at 17:25
@ChrisW. I wish I could but the problem is I'm working with images on localhost and javascript works with a specified path. Tried to put in into a jsfiddle but it didn't work though :(
– Desiigner
Nov 12 '18 at 17:26
@ChrisW. I wish I could but the problem is I'm working with images on localhost and javascript works with a specified path. Tried to put in into a jsfiddle but it didn't work though :(
– Desiigner
Nov 12 '18 at 17:26
You can just use other images. We don't need an exact replica of what you're doing, we just need a minimal working example to show what's going wrong. You could even just use a
div with a background-color instead of an image– vrugtehagel
Nov 12 '18 at 17:30
You can just use other images. We don't need an exact replica of what you're doing, we just need a minimal working example to show what's going wrong. You could even just use a
div with a background-color instead of an image– vrugtehagel
Nov 12 '18 at 17:30
Can you show us your code? The animation in css would be nice.
– codeWithMe
Nov 12 '18 at 17:31
Can you show us your code? The animation in css would be nice.
– codeWithMe
Nov 12 '18 at 17:31
add a comment |
1 Answer
1
active
oldest
votes
Without seeing your code it's difficult to know, but I'd imagine it may have something to do with the way you've set up your @keyframes. For an infinite looping animation with no glitch, try something like this:
HTML:
div
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 2s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 2s infinite;
CSS:
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove
0% top: 0px;
50% top: 100px;
100% top: 0px;
/* Standard syntax */
@keyframes mymove
0% top: 0px;
50% top: 100px;
100% top: 0px;
Hope this helps 👍
answered Nov 12 '18 at 18:39
jorscobryjorscobry
856
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%2f53267121%2fsmooth-animation-start%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
Without seeing your code it's difficult to know, but I'd imagine it may have something to do with the way you've set up your @keyframes. For an infinite looping animation with no glitch, try something like this:
HTML:
div
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 2s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 2s infinite;
CSS:
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove
0% top: 0px;
50% top: 100px;
100% top: 0px;
/* Standard syntax */
@keyframes mymove
0% top: 0px;
50% top: 100px;
100% top: 0px;
Hope this helps 👍
answered Nov 12 '18 at 18:39
jorscobryjorscobry
856
add a comment |
Without seeing your code it's difficult to know, but I'd imagine it may have something to do with the way you've set up your @keyframes. For an infinite looping animation with no glitch, try something like this:
HTML:
div
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 2s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 2s infinite;
CSS:
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove
0% top: 0px;
50% top: 100px;
100% top: 0px;
/* Standard syntax */
@keyframes mymove
0% top: 0px;
50% top: 100px;
100% top: 0px;
Hope this helps 👍
answered Nov 12 '18 at 18:39
jorscobryjorscobry
856
add a comment |
Without seeing your code it's difficult to know, but I'd imagine it may have something to do with the way you've set up your @keyframes. For an infinite looping animation with no glitch, try something like this:
HTML:
div
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 2s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 2s infinite;
CSS:
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove
0% top: 0px;
50% top: 100px;
100% top: 0px;
/* Standard syntax */
@keyframes mymove
0% top: 0px;
50% top: 100px;
100% top: 0px;
Hope this helps 👍
answered Nov 12 '18 at 18:39
jorscobryjorscobry
856
Without seeing your code it's difficult to know, but I'd imagine it may have something to do with the way you've set up your @keyframes. For an infinite looping animation with no glitch, try something like this:
HTML:
div
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 2s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 2s infinite;
CSS:
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove
0% top: 0px;
50% top: 100px;
100% top: 0px;
/* Standard syntax */
@keyframes mymove
0% top: 0px;
50% top: 100px;
100% top: 0px;
Hope this helps 👍
answered Nov 12 '18 at 18:39
jorscobryjorscobry
856
answered Nov 12 '18 at 18:39
jorscobryjorscobry
856
answered Nov 12 '18 at 18:39
jorscobryjorscobry
856
answered Nov 12 '18 at 18:39
jorscobryjorscobry
856
856
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%2f53267121%2fsmooth-animation-start%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
4
Help people help you by giving them a minimal example to reproduce the issue. Sounds like something that should be done in just css anyway.
– Chris W.
Nov 12 '18 at 17:25
@ChrisW. I wish I could but the problem is I'm working with images on localhost and javascript works with a specified path. Tried to put in into a jsfiddle but it didn't work though :(
– Desiigner
Nov 12 '18 at 17:26
You can just use other images. We don't need an exact replica of what you're doing, we just need a minimal working example to show what's going wrong. You could even just use a
divwith abackground-colorinstead of an image– vrugtehagel
Nov 12 '18 at 17:30
Can you show us your code? The animation in css would be nice.
– codeWithMe
Nov 12 '18 at 17:31