keyframes in css doesn't work properly using javascript [duplicate]
0
This question already has an answer here:
Setting CSS top percent not working as expected
3 answers
I want to add an animation dynamically using javascript to play an animation after a user clicked on it. e.g imagine connect 4 game, the purpose is to play animation from top of the board to where the bead should be placed. the problem is that the style successfully added to the document but it doesn't work properly!
Here is what I have implemented:
function changeColor(i, j){
var div = document.querySelector(`.cell-${i}-${j}`);
div.style.backgroundColor = currentTurn;
var style = document.querySelector('style');
var keyframe = `
@keyframes animation-${i}-${j} {
0% {
top: 0%;
}
100% {
top: 20%;
}
}
`
div.style.animationName = `animation-${i}-${j}`;
div.style.animationDuration = '2s';
style.innerHTML += keyframe;
}
currentTurn has the value of "red" | "blue".
I don't know why the animation isn't played! the dom is like the following picture:
javascript css css3 css-animations
asked Nov 13 '18 at 12:55
Mostafa GhadimiMostafa Ghadimi
184216
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 13 '18 at 13:30
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
0
This question already has an answer here:
Setting CSS top percent not working as expected
3 answers
I want to add an animation dynamically using javascript to play an animation after a user clicked on it. e.g imagine connect 4 game, the purpose is to play animation from top of the board to where the bead should be placed. the problem is that the style successfully added to the document but it doesn't work properly!
Here is what I have implemented:
function changeColor(i, j){
var div = document.querySelector(`.cell-${i}-${j}`);
div.style.backgroundColor = currentTurn;
var style = document.querySelector('style');
var keyframe = `
@keyframes animation-${i}-${j} {
0% {
top: 0%;
}
100% {
top: 20%;
}
}
`
div.style.animationName = `animation-${i}-${j}`;
div.style.animationDuration = '2s';
style.innerHTML += keyframe;
}
currentTurn has the value of "red" | "blue".
I don't know why the animation isn't played! the dom is like the following picture:
javascript css css3 css-animations
asked Nov 13 '18 at 12:55
Mostafa GhadimiMostafa Ghadimi
184216
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 13 '18 at 13:30
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
You probably need to add keyframe to the style before starting the animation.
– Gerard
Nov 13 '18 at 13:02
@Gerard would you please explain more explicitly?
– Mostafa Ghadimi
Nov 13 '18 at 13:04
style.innerHTML += keyframe; move that line up, so it is above div.style.animationName = and try again
– Gerard
Nov 13 '18 at 13:06
@Gerard Unfortunately, It doesn't work properly
– Mostafa Ghadimi
Nov 13 '18 at 13:07
top with percentage value is relative to height of parent element, if there is no height it won't work + the element need to be positioned
– Temani Afif
Nov 13 '18 at 13:26
add a comment |
0
0
0
This question already has an answer here:
Setting CSS top percent not working as expected
3 answers
I want to add an animation dynamically using javascript to play an animation after a user clicked on it. e.g imagine connect 4 game, the purpose is to play animation from top of the board to where the bead should be placed. the problem is that the style successfully added to the document but it doesn't work properly!
Here is what I have implemented:
function changeColor(i, j){
var div = document.querySelector(`.cell-${i}-${j}`);
div.style.backgroundColor = currentTurn;
var style = document.querySelector('style');
var keyframe = `
@keyframes animation-${i}-${j} {
0% {
top: 0%;
}
100% {
top: 20%;
}
}
`
div.style.animationName = `animation-${i}-${j}`;
div.style.animationDuration = '2s';
style.innerHTML += keyframe;
}
currentTurn has the value of "red" | "blue".
I don't know why the animation isn't played! the dom is like the following picture:
javascript css css3 css-animations
asked Nov 13 '18 at 12:55
Mostafa GhadimiMostafa Ghadimi
184216
This question already has an answer here:
Setting CSS top percent not working as expected
3 answers
I want to add an animation dynamically using javascript to play an animation after a user clicked on it. e.g imagine connect 4 game, the purpose is to play animation from top of the board to where the bead should be placed. the problem is that the style successfully added to the document but it doesn't work properly!
Here is what I have implemented:
function changeColor(i, j){
var div = document.querySelector(`.cell-${i}-${j}`);
div.style.backgroundColor = currentTurn;
var style = document.querySelector('style');
var keyframe = `
@keyframes animation-${i}-${j} {
0% {
top: 0%;
}
100% {
top: 20%;
}
}
`
div.style.animationName = `animation-${i}-${j}`;
div.style.animationDuration = '2s';
style.innerHTML += keyframe;
}
currentTurn has the value of "red" | "blue".
I don't know why the animation isn't played! the dom is like the following picture:
This question already has an answer here:
Setting CSS top percent not working as expected
3 answers
javascript css css3 css-animations
javascript css css3 css-animations
asked Nov 13 '18 at 12:55
Mostafa GhadimiMostafa Ghadimi
184216
asked Nov 13 '18 at 12:55
Mostafa GhadimiMostafa Ghadimi
184216
asked Nov 13 '18 at 12:55
Mostafa GhadimiMostafa Ghadimi
184216
asked Nov 13 '18 at 12:55
Mostafa GhadimiMostafa Ghadimi
184216
asked Nov 13 '18 at 12:55
Mostafa GhadimiMostafa Ghadimi
184216
184216
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 13 '18 at 13:30
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 13 '18 at 13:30
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
You probably need to add keyframe to the style before starting the animation.
– Gerard
Nov 13 '18 at 13:02
@Gerard would you please explain more explicitly?
– Mostafa Ghadimi
Nov 13 '18 at 13:04
style.innerHTML += keyframe; move that line up, so it is above div.style.animationName = and try again
– Gerard
Nov 13 '18 at 13:06
@Gerard Unfortunately, It doesn't work properly
– Mostafa Ghadimi
Nov 13 '18 at 13:07
top with percentage value is relative to height of parent element, if there is no height it won't work + the element need to be positioned
– Temani Afif
Nov 13 '18 at 13:26
add a comment |
You probably need to add keyframe to the style before starting the animation.
– Gerard
Nov 13 '18 at 13:02
@Gerard would you please explain more explicitly?
– Mostafa Ghadimi
Nov 13 '18 at 13:04
style.innerHTML += keyframe; move that line up, so it is above div.style.animationName = and try again
– Gerard
Nov 13 '18 at 13:06
@Gerard Unfortunately, It doesn't work properly
– Mostafa Ghadimi
Nov 13 '18 at 13:07
top with percentage value is relative to height of parent element, if there is no height it won't work + the element need to be positioned
– Temani Afif
Nov 13 '18 at 13:26
You probably need to add keyframe to the style before starting the animation.
– Gerard
Nov 13 '18 at 13:02
You probably need to add keyframe to the style before starting the animation.
– Gerard
Nov 13 '18 at 13:02
@Gerard would you please explain more explicitly?
– Mostafa Ghadimi
Nov 13 '18 at 13:04
@Gerard would you please explain more explicitly?
– Mostafa Ghadimi
Nov 13 '18 at 13:04
style.innerHTML += keyframe; move that line up, so it is above div.style.animationName = and try again
– Gerard
Nov 13 '18 at 13:06
style.innerHTML += keyframe; move that line up, so it is above div.style.animationName = and try again
– Gerard
Nov 13 '18 at 13:06
@Gerard Unfortunately, It doesn't work properly
– Mostafa Ghadimi
Nov 13 '18 at 13:07
@Gerard Unfortunately, It doesn't work properly
– Mostafa Ghadimi
Nov 13 '18 at 13:07
top with percentage value is relative to height of parent element, if there is no height it won't work + the element need to be positioned
– Temani Afif
Nov 13 '18 at 13:26
top with percentage value is relative to height of parent element, if there is no height it won't work + the element need to be positioned
– Temani Afif
Nov 13 '18 at 13:26
add a comment |
1 Answer
1
active
oldest
votes
0
Please see below.
function changeColor(i, j) {
var div = document.querySelector(`.cell-${i}-${j}`);
div.style.backgroundColor = "blue";
var style = document.getElementsByTagName('style')[2];
var keyframe = `
@keyframes animation-${i}-${j} {
0% {
top: 0%;
}
100% {
top: 20%;
}
}
`;
style.innerHTML += keyframe;
div.style.animationDuration = '2s';
div.style.animationName = `animation-${i}-${j}`;
}
changeColor(1, 1);<style>
.cell-1-1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
</style>
<div class="cell-1-1"></div>answered Nov 13 '18 at 13:22
GerardGerard
11k41938
keepingstyle.innerHTML += keyframe;at the end will also work, try it
– Temani Afif
Nov 13 '18 at 13:25
I have tried it in my own code and it works in static mode, but the problem is that it doesn't work dynamically!
– Mostafa Ghadimi
Nov 13 '18 at 13:28
@MostafaGhadimi see my comment in your question, the issue is not the animation, it's the top with percentage value
– Temani Afif
Nov 13 '18 at 13:30
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Please see below.
function changeColor(i, j) {
var div = document.querySelector(`.cell-${i}-${j}`);
div.style.backgroundColor = "blue";
var style = document.getElementsByTagName('style')[2];
var keyframe = `
@keyframes animation-${i}-${j} {
0% {
top: 0%;
}
100% {
top: 20%;
}
}
`;
style.innerHTML += keyframe;
div.style.animationDuration = '2s';
div.style.animationName = `animation-${i}-${j}`;
}
changeColor(1, 1);<style>
.cell-1-1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
</style>
<div class="cell-1-1"></div>answered Nov 13 '18 at 13:22
GerardGerard
11k41938
keepingstyle.innerHTML += keyframe;at the end will also work, try it
– Temani Afif
Nov 13 '18 at 13:25
I have tried it in my own code and it works in static mode, but the problem is that it doesn't work dynamically!
– Mostafa Ghadimi
Nov 13 '18 at 13:28
@MostafaGhadimi see my comment in your question, the issue is not the animation, it's the top with percentage value
– Temani Afif
Nov 13 '18 at 13:30
add a comment |
0
Please see below.
function changeColor(i, j) {
var div = document.querySelector(`.cell-${i}-${j}`);
div.style.backgroundColor = "blue";
var style = document.getElementsByTagName('style')[2];
var keyframe = `
@keyframes animation-${i}-${j} {
0% {
top: 0%;
}
100% {
top: 20%;
}
}
`;
style.innerHTML += keyframe;
div.style.animationDuration = '2s';
div.style.animationName = `animation-${i}-${j}`;
}
changeColor(1, 1);<style>
.cell-1-1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
</style>
<div class="cell-1-1"></div>answered Nov 13 '18 at 13:22
GerardGerard
11k41938
keepingstyle.innerHTML += keyframe;at the end will also work, try it
– Temani Afif
Nov 13 '18 at 13:25
I have tried it in my own code and it works in static mode, but the problem is that it doesn't work dynamically!
– Mostafa Ghadimi
Nov 13 '18 at 13:28
@MostafaGhadimi see my comment in your question, the issue is not the animation, it's the top with percentage value
– Temani Afif
Nov 13 '18 at 13:30
add a comment |
0
0
0
Please see below.
function changeColor(i, j) {
var div = document.querySelector(`.cell-${i}-${j}`);
div.style.backgroundColor = "blue";
var style = document.getElementsByTagName('style')[2];
var keyframe = `
@keyframes animation-${i}-${j} {
0% {
top: 0%;
}
100% {
top: 20%;
}
}
`;
style.innerHTML += keyframe;
div.style.animationDuration = '2s';
div.style.animationName = `animation-${i}-${j}`;
}
changeColor(1, 1);<style>
.cell-1-1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
</style>
<div class="cell-1-1"></div>answered Nov 13 '18 at 13:22
GerardGerard
11k41938
Please see below.
function changeColor(i, j) {
var div = document.querySelector(`.cell-${i}-${j}`);
div.style.backgroundColor = "blue";
var style = document.getElementsByTagName('style')[2];
var keyframe = `
@keyframes animation-${i}-${j} {
0% {
top: 0%;
}
100% {
top: 20%;
}
}
`;
style.innerHTML += keyframe;
div.style.animationDuration = '2s';
div.style.animationName = `animation-${i}-${j}`;
}
changeColor(1, 1);<style>
.cell-1-1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
</style>
<div class="cell-1-1"></div>function changeColor(i, j) {
var div = document.querySelector(`.cell-${i}-${j}`);
div.style.backgroundColor = "blue";
var style = document.getElementsByTagName('style')[2];
var keyframe = `
@keyframes animation-${i}-${j} {
0% {
top: 0%;
}
100% {
top: 20%;
}
}
`;
style.innerHTML += keyframe;
div.style.animationDuration = '2s';
div.style.animationName = `animation-${i}-${j}`;
}
changeColor(1, 1);<style>
.cell-1-1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
</style>
<div class="cell-1-1"></div>function changeColor(i, j) {
var div = document.querySelector(`.cell-${i}-${j}`);
div.style.backgroundColor = "blue";
var style = document.getElementsByTagName('style')[2];
var keyframe = `
@keyframes animation-${i}-${j} {
0% {
top: 0%;
}
100% {
top: 20%;
}
}
`;
style.innerHTML += keyframe;
div.style.animationDuration = '2s';
div.style.animationName = `animation-${i}-${j}`;
}
changeColor(1, 1);<style>
.cell-1-1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
</style>
<div class="cell-1-1"></div>answered Nov 13 '18 at 13:22
GerardGerard
11k41938
answered Nov 13 '18 at 13:22
GerardGerard
11k41938
answered Nov 13 '18 at 13:22
GerardGerard
11k41938
answered Nov 13 '18 at 13:22
GerardGerard
11k41938
11k41938
keepingstyle.innerHTML += keyframe;at the end will also work, try it
– Temani Afif
Nov 13 '18 at 13:25
I have tried it in my own code and it works in static mode, but the problem is that it doesn't work dynamically!
– Mostafa Ghadimi
Nov 13 '18 at 13:28
@MostafaGhadimi see my comment in your question, the issue is not the animation, it's the top with percentage value
– Temani Afif
Nov 13 '18 at 13:30
add a comment |
keepingstyle.innerHTML += keyframe;at the end will also work, try it
– Temani Afif
Nov 13 '18 at 13:25
I have tried it in my own code and it works in static mode, but the problem is that it doesn't work dynamically!
– Mostafa Ghadimi
Nov 13 '18 at 13:28
@MostafaGhadimi see my comment in your question, the issue is not the animation, it's the top with percentage value
– Temani Afif
Nov 13 '18 at 13:30
keeping
style.innerHTML += keyframe; at the end will also work, try it– Temani Afif
Nov 13 '18 at 13:25
keeping
style.innerHTML += keyframe; at the end will also work, try it– Temani Afif
Nov 13 '18 at 13:25
I have tried it in my own code and it works in static mode, but the problem is that it doesn't work dynamically!
– Mostafa Ghadimi
Nov 13 '18 at 13:28
I have tried it in my own code and it works in static mode, but the problem is that it doesn't work dynamically!
– Mostafa Ghadimi
Nov 13 '18 at 13:28
@MostafaGhadimi see my comment in your question, the issue is not the animation, it's the top with percentage value
– Temani Afif
Nov 13 '18 at 13:30
@MostafaGhadimi see my comment in your question, the issue is not the animation, it's the top with percentage value
– Temani Afif
Nov 13 '18 at 13:30
add a comment |
You probably need to add keyframe to the style before starting the animation.
– Gerard
Nov 13 '18 at 13:02
@Gerard would you please explain more explicitly?
– Mostafa Ghadimi
Nov 13 '18 at 13:04
style.innerHTML += keyframe; move that line up, so it is above div.style.animationName = and try again
– Gerard
Nov 13 '18 at 13:06
@Gerard Unfortunately, It doesn't work properly
– Mostafa Ghadimi
Nov 13 '18 at 13:07
top with percentage value is relative to height of parent element, if there is no height it won't work + the element need to be positioned
– Temani Afif
Nov 13 '18 at 13:26