Manipulate negative animation-delay value in MS Edge
I try using the animation-delay with negative values. The value should be manipulated with JavaScript to control the animation. The following pen works in all modern browsers, but not in MS Edge. Also not with the corresponding vendor prefixes.
Codepen Example
function change(val){
var box = document.getElementById('box');
box.style.animationDelay = -val + 's';
}#box {
width: 200px;
height: 200px;
background-color: red;
animation-name: effect;
animation-duration: 1s;
animation-delay: 0s;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
input {
margin-top: 10px;
width: 200px;
}
@-webkit-keyframes effect {
to {
background-color: blue;
}
}
@-moz-keyframes effect {
to {
background-color: blue;
}
}
@-ms-keyframes effect {
to {
background-color: blue;
}
}
@keyframes effect {
to {
background-color: blue;
}
}<div id="box" class="transitionEffect"></div>
<input type="range" id="range" min="0" max="1" step="0.05" value="0" oninput="change(this.value)">Isn't this supported by MS Edge?
javascript animation microsoft-edge
asked Nov 22 '18 at 14:58
DoiDoi
33
add a comment |
I try using the animation-delay with negative values. The value should be manipulated with JavaScript to control the animation. The following pen works in all modern browsers, but not in MS Edge. Also not with the corresponding vendor prefixes.
Codepen Example
function change(val){
var box = document.getElementById('box');
box.style.animationDelay = -val + 's';
}#box {
width: 200px;
height: 200px;
background-color: red;
animation-name: effect;
animation-duration: 1s;
animation-delay: 0s;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
input {
margin-top: 10px;
width: 200px;
}
@-webkit-keyframes effect {
to {
background-color: blue;
}
}
@-moz-keyframes effect {
to {
background-color: blue;
}
}
@-ms-keyframes effect {
to {
background-color: blue;
}
}
@keyframes effect {
to {
background-color: blue;
}
}<div id="box" class="transitionEffect"></div>
<input type="range" id="range" min="0" max="1" step="0.05" value="0" oninput="change(this.value)">Isn't this supported by MS Edge?
javascript animation microsoft-edge
asked Nov 22 '18 at 14:58
DoiDoi
33
add a comment |
I try using the animation-delay with negative values. The value should be manipulated with JavaScript to control the animation. The following pen works in all modern browsers, but not in MS Edge. Also not with the corresponding vendor prefixes.
Codepen Example
function change(val){
var box = document.getElementById('box');
box.style.animationDelay = -val + 's';
}#box {
width: 200px;
height: 200px;
background-color: red;
animation-name: effect;
animation-duration: 1s;
animation-delay: 0s;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
input {
margin-top: 10px;
width: 200px;
}
@-webkit-keyframes effect {
to {
background-color: blue;
}
}
@-moz-keyframes effect {
to {
background-color: blue;
}
}
@-ms-keyframes effect {
to {
background-color: blue;
}
}
@keyframes effect {
to {
background-color: blue;
}
}<div id="box" class="transitionEffect"></div>
<input type="range" id="range" min="0" max="1" step="0.05" value="0" oninput="change(this.value)">Isn't this supported by MS Edge?
javascript animation microsoft-edge
asked Nov 22 '18 at 14:58
DoiDoi
33
I try using the animation-delay with negative values. The value should be manipulated with JavaScript to control the animation. The following pen works in all modern browsers, but not in MS Edge. Also not with the corresponding vendor prefixes.
Codepen Example
function change(val){
var box = document.getElementById('box');
box.style.animationDelay = -val + 's';
}#box {
width: 200px;
height: 200px;
background-color: red;
animation-name: effect;
animation-duration: 1s;
animation-delay: 0s;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
input {
margin-top: 10px;
width: 200px;
}
@-webkit-keyframes effect {
to {
background-color: blue;
}
}
@-moz-keyframes effect {
to {
background-color: blue;
}
}
@-ms-keyframes effect {
to {
background-color: blue;
}
}
@keyframes effect {
to {
background-color: blue;
}
}<div id="box" class="transitionEffect"></div>
<input type="range" id="range" min="0" max="1" step="0.05" value="0" oninput="change(this.value)">Isn't this supported by MS Edge?
function change(val){
var box = document.getElementById('box');
box.style.animationDelay = -val + 's';
}#box {
width: 200px;
height: 200px;
background-color: red;
animation-name: effect;
animation-duration: 1s;
animation-delay: 0s;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
input {
margin-top: 10px;
width: 200px;
}
@-webkit-keyframes effect {
to {
background-color: blue;
}
}
@-moz-keyframes effect {
to {
background-color: blue;
}
}
@-ms-keyframes effect {
to {
background-color: blue;
}
}
@keyframes effect {
to {
background-color: blue;
}
}<div id="box" class="transitionEffect"></div>
<input type="range" id="range" min="0" max="1" step="0.05" value="0" oninput="change(this.value)">function change(val){
var box = document.getElementById('box');
box.style.animationDelay = -val + 's';
}#box {
width: 200px;
height: 200px;
background-color: red;
animation-name: effect;
animation-duration: 1s;
animation-delay: 0s;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
input {
margin-top: 10px;
width: 200px;
}
@-webkit-keyframes effect {
to {
background-color: blue;
}
}
@-moz-keyframes effect {
to {
background-color: blue;
}
}
@-ms-keyframes effect {
to {
background-color: blue;
}
}
@keyframes effect {
to {
background-color: blue;
}
}<div id="box" class="transitionEffect"></div>
<input type="range" id="range" min="0" max="1" step="0.05" value="0" oninput="change(this.value)">javascript animation microsoft-edge
javascript animation microsoft-edge
asked Nov 22 '18 at 14:58
DoiDoi
33
asked Nov 22 '18 at 14:58
DoiDoi
33
edited Nov 22 '18 at 15:05
Doi
asked Nov 22 '18 at 14:58
DoiDoi
33
asked Nov 22 '18 at 14:58
DoiDoi
33
asked Nov 22 '18 at 14:58
DoiDoi
33
33
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
This bug report on MS shows the problem:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7729819/
You cannot change animation related values with an effect in Edge. It seems that Edge adhers to an older draft specification of CSS animation which tells that;
The values used for the keyframes and animation properties are snapshotted at the time the animation starts. Changing them during the execution of the animation has no effect.
From https://www.w3.org/TR/2013/WD-css3-animations-20130219/#animations
But you have one chance, if you change the animation-name property to a different value the animation starts anew and you can simultaniously change the other animation properties. This has to be done repeatedly every time you want to change an animation property. You can of course toggle between animations with identical keyframes definitions but only different names.
answered Nov 22 '18 at 15:35
HerrSerkerHerrSerker
20.1k84779
add a comment |
Great, i rebuilt the pen and toggle the animation when using the MS Edge. The performance goes down a bit, but MS Edge users don't know it differently anyway. :)
You should make sure that the step is deeper than 1 to get a smoother animation.
Thanks for your help!
answered Nov 23 '18 at 9:21
DoiDoi
33
Would you like to share your solution?
– HerrSerker
Nov 23 '18 at 10:03
Sure, I edited the pen from my first post. See codepen.io/doi-pen/pen/jQzqGW
– Doi
Nov 23 '18 at 10:30
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%2f53433617%2fmanipulate-negative-animation-delay-value-in-ms-edge%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
This bug report on MS shows the problem:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7729819/
You cannot change animation related values with an effect in Edge. It seems that Edge adhers to an older draft specification of CSS animation which tells that;
The values used for the keyframes and animation properties are snapshotted at the time the animation starts. Changing them during the execution of the animation has no effect.
From https://www.w3.org/TR/2013/WD-css3-animations-20130219/#animations
But you have one chance, if you change the animation-name property to a different value the animation starts anew and you can simultaniously change the other animation properties. This has to be done repeatedly every time you want to change an animation property. You can of course toggle between animations with identical keyframes definitions but only different names.
answered Nov 22 '18 at 15:35
HerrSerkerHerrSerker
20.1k84779
add a comment |
This bug report on MS shows the problem:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7729819/
You cannot change animation related values with an effect in Edge. It seems that Edge adhers to an older draft specification of CSS animation which tells that;
The values used for the keyframes and animation properties are snapshotted at the time the animation starts. Changing them during the execution of the animation has no effect.
From https://www.w3.org/TR/2013/WD-css3-animations-20130219/#animations
But you have one chance, if you change the animation-name property to a different value the animation starts anew and you can simultaniously change the other animation properties. This has to be done repeatedly every time you want to change an animation property. You can of course toggle between animations with identical keyframes definitions but only different names.
answered Nov 22 '18 at 15:35
HerrSerkerHerrSerker
20.1k84779
add a comment |
This bug report on MS shows the problem:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7729819/
You cannot change animation related values with an effect in Edge. It seems that Edge adhers to an older draft specification of CSS animation which tells that;
The values used for the keyframes and animation properties are snapshotted at the time the animation starts. Changing them during the execution of the animation has no effect.
From https://www.w3.org/TR/2013/WD-css3-animations-20130219/#animations
But you have one chance, if you change the animation-name property to a different value the animation starts anew and you can simultaniously change the other animation properties. This has to be done repeatedly every time you want to change an animation property. You can of course toggle between animations with identical keyframes definitions but only different names.
answered Nov 22 '18 at 15:35
HerrSerkerHerrSerker
20.1k84779
This bug report on MS shows the problem:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7729819/
You cannot change animation related values with an effect in Edge. It seems that Edge adhers to an older draft specification of CSS animation which tells that;
The values used for the keyframes and animation properties are snapshotted at the time the animation starts. Changing them during the execution of the animation has no effect.
From https://www.w3.org/TR/2013/WD-css3-animations-20130219/#animations
But you have one chance, if you change the animation-name property to a different value the animation starts anew and you can simultaniously change the other animation properties. This has to be done repeatedly every time you want to change an animation property. You can of course toggle between animations with identical keyframes definitions but only different names.
answered Nov 22 '18 at 15:35
HerrSerkerHerrSerker
20.1k84779
answered Nov 22 '18 at 15:35
HerrSerkerHerrSerker
20.1k84779
answered Nov 22 '18 at 15:35
HerrSerkerHerrSerker
20.1k84779
answered Nov 22 '18 at 15:35
HerrSerkerHerrSerker
20.1k84779
20.1k84779
add a comment |
add a comment |
Great, i rebuilt the pen and toggle the animation when using the MS Edge. The performance goes down a bit, but MS Edge users don't know it differently anyway. :)
You should make sure that the step is deeper than 1 to get a smoother animation.
Thanks for your help!
answered Nov 23 '18 at 9:21
DoiDoi
33
Would you like to share your solution?
– HerrSerker
Nov 23 '18 at 10:03
Sure, I edited the pen from my first post. See codepen.io/doi-pen/pen/jQzqGW
– Doi
Nov 23 '18 at 10:30
add a comment |
Great, i rebuilt the pen and toggle the animation when using the MS Edge. The performance goes down a bit, but MS Edge users don't know it differently anyway. :)
You should make sure that the step is deeper than 1 to get a smoother animation.
Thanks for your help!
answered Nov 23 '18 at 9:21
DoiDoi
33
Would you like to share your solution?
– HerrSerker
Nov 23 '18 at 10:03
Sure, I edited the pen from my first post. See codepen.io/doi-pen/pen/jQzqGW
– Doi
Nov 23 '18 at 10:30
add a comment |
Great, i rebuilt the pen and toggle the animation when using the MS Edge. The performance goes down a bit, but MS Edge users don't know it differently anyway. :)
You should make sure that the step is deeper than 1 to get a smoother animation.
Thanks for your help!
answered Nov 23 '18 at 9:21
DoiDoi
33
Great, i rebuilt the pen and toggle the animation when using the MS Edge. The performance goes down a bit, but MS Edge users don't know it differently anyway. :)
You should make sure that the step is deeper than 1 to get a smoother animation.
Thanks for your help!
answered Nov 23 '18 at 9:21
DoiDoi
33
answered Nov 23 '18 at 9:21
DoiDoi
33
answered Nov 23 '18 at 9:21
DoiDoi
33
answered Nov 23 '18 at 9:21
DoiDoi
33
33
Would you like to share your solution?
– HerrSerker
Nov 23 '18 at 10:03
Sure, I edited the pen from my first post. See codepen.io/doi-pen/pen/jQzqGW
– Doi
Nov 23 '18 at 10:30
add a comment |
Would you like to share your solution?
– HerrSerker
Nov 23 '18 at 10:03
Sure, I edited the pen from my first post. See codepen.io/doi-pen/pen/jQzqGW
– Doi
Nov 23 '18 at 10:30
Would you like to share your solution?
– HerrSerker
Nov 23 '18 at 10:03
Would you like to share your solution?
– HerrSerker
Nov 23 '18 at 10:03
Sure, I edited the pen from my first post. See codepen.io/doi-pen/pen/jQzqGW
– Doi
Nov 23 '18 at 10:30
Sure, I edited the pen from my first post. See codepen.io/doi-pen/pen/jQzqGW
– Doi
Nov 23 '18 at 10:30
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%2f53433617%2fmanipulate-negative-animation-delay-value-in-ms-edge%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
