Keyframe animation flickering on scaling Firefox - javascript

Hi i have created a game which runs on different devices on different resolutions. so to adjust the resolution i am using dynamic css scaling , so due to scaling my keyframe animation is flickering massively on firefox. The sprite animation is used within a div background-imgae. Please help me to get rid out of this.
Below is the source code and url of animation:
Please open it in firefox.
https://trcdev.oupchina.com.hk/test/kg_game3/#/home
.boboFeather {
background-image: url(‘../../assets/images/home/boboFeather.png’);
background-repeat: no-repeat;
width: 460px;
height: 489px;
position: absolute;
right: 250px;
bottom: 30px;
animation: BoboFeatherAnim 2s steps(14) infinite;
-webkit-animation: BoboFeatherAnim 2s steps(14) infinite;
-moz-animation: BoboFeatherAnim 2s steps(14) infinite;
-ms-animation: BoboFeatherAnim 2s steps(14) infinite;
-o-animation: BoboFeatherAnim 2s steps(14) infinite;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
#keyframes BoboFeatherAnim {
from {
background-position: 0px;
}
to {
background-position: -6440px;
}
}
#-moz-keyframes BoboFeatherAnim {
from {
background-position: 0px;
}
to {
background-position: -6440px;
}
}
#-ms-keyframes BoboFeatherAnim {
from {
background-position: 0px;
}
to {
background-position: -6440px;
}
}
#-o-keyframes BoboFeatherAnim {
from {
background-position: 0px;
}
to {
background-position: -6440px;
}
}
#-webkit-keyframes BoboFeatherAnim {
from {
background-position: 0px;
}
to {
background-position: -6440px;
}
}

Add -webkit-transform-style: preserve-3d; or -moz-transform-style: preserve-3d;style to the container of a flickering element. To class="container" in your case, that contains .boboFeather element.

Related

How to Animate a Gradient Background that includes all html colors using css

I have an HTML box, where a gradient background color animates. Gradient background includes 3 colors now. But I want to include all available colors.
How can we do that?
This is how I am doing right now.
background: linear-gradient(57deg, #fdd266, #c33c7a, #595ba8);
background-size: 600% 600%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
height: 140px;
border-bottom: none;
Can you try as below
.box {
position: absolute;
left: 50%;
top: 50%;
background: linear-gradient(-45deg, #fdd266, #c33c7a, #595ba8);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 9rem;
width:9rem;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<div class="box">
here is your box
</div>

Why is my sprite sheet not moving at all in css?

I'm using a sprite sheet for the first time and I believe I've entered the code correctly. However, there's no movement whatsoever. Can anyone help me?
I've looked up several tutorials and can't see a difference between what they have and what I have.
.normal {
width:327px;
height: 445px;
background-image:url("https://res.cloudinary.com/dytmcam8b/image/upload/v1561677299/virtual%20pet/Sheet.png");
display: block;
top: 100px;
left: 300px;
position: relative;
transform: scale(0.5);
-webkit-animation: normal .8s steps(10) infinite;
-moz-animation: normal .8s steps(10) infinite;
-ms-animation: normal .8s steps(10) infinite;
-o-animation: normal .8s steps(10) infinite;
animation: normal .8s steps(10) infinite;
}
#-webkit-keyframes normal{
from{background-position:0px;}
to{background-position:-3270px;}
}
}
#keyframes normal{
from {background-position:0px;}
to {background-position:-3270px;}
}
}
<div class="normal"></div>
I'm expecting movement but I just get the static first sprite.
normal is a possible value of the animation-direction property. By naming your animation normal and using it in the shorthand animation property, the browser interprets your CSS as providing a value for animation-direction and not the name of your animation.
If you name your animation anything else that's not a reserved word, it will run.
It seems that normal ist just a poorly chosen name for the animation:
.normal {
width: 327px;
height: 445px;
background-image: url("https://res.cloudinary.com/dytmcam8b/image/upload/v1561677299/virtual%20pet/Sheet.png");
display: block;
top: 100px;
left: 300px;
position: relative;
transform: scale(0.5);
-webkit-animation: foo .8s steps(10) infinite;
-moz-animation: foo .8s steps(10) infinite;
-ms-animation: foo .8s steps(10) infinite;
-o-animation: foo .8s steps(10) infinite;
animation: foo .8s steps(10) infinite;
}
#-webkit-keyframes foo {
from {
background-position: 0px;
}
to {
background-position: -3270px;
}
}
}
#keyframes foo {
from {
background-position: 0px;
}
to {
background-position: -3270px;
}
}
}
<div class="normal"></div>

Getting Top/Right values ​from a css-animated element

I'm trying to get the Top and Right values from an element being rotated by a CSS animation, for this I am using the following code:
HTML:
<div id="ball1"> </div>
CSS:
#keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#ball1 {
transform-origin: center right;
animation: spin 2.5s linear 0s infinite forwards;
position: relative;
background-color: #7883f7;
width: 10;
height: 10;
border-radius: 10px;
}
Javascript:
console.log(window.getComputedStyle(document.getElementById("ball1"), null).top);
console.log(window.getComputedStyle(document.getElementById("ball1"), null).right);
However it returns a value of 0px, I wanted to get the value from Right and Top as if I was manually setting them (and not by the transform animation).
If this is not possible, is there a way to simulate a "circle" rotation and return the right/top values without using the transform?
ie:
https://66.media.tumblr.com/fb22b61bcbca3785a515e86c2276451b/tumblr_inline_pmimnjEvbK1v6q8wn_1280.gif?fbclid=IwAR2zjgE0hfB8emWOg0f6TOcQb8DWGbEvu9IQOr92fMq4HmMKjiAQRQzLmI0
Use getBoundingClientRect():
const ball = document.getElementById("ball");
setInterval(() => {
const rect = ball.getBoundingClientRect();
console.log(rect.top, rect.right);
}, 300);
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#ball {
transform-origin: center right;
animation: spin 2.5s linear 0s infinite forwards;
position: relative;
background-color: #7883f7;
width: 10px;
height: 10px;
border-radius: 10px;
}
<div id="ball"></div>
Here is an approximation using top/left. The trick is to animate each property individually alternating the ease function to simulate the circular path:
.box {
width:100px;
height:100px;
position:relative;
}
#ball1 {
animation:
Atop 2.5s infinite,
Aleft 2.5s infinite;
position: absolute;
background-color: #7883f7;
width: 10px;
height: 10px;
border-radius: 10px;
}
#keyframes Atop {
0%,50%,100% {
top:50%;
animation-timing-function: ease-out;
}
25% {
top:0%;
animation-timing-function: ease-in;
}
75% {
top:100%;
animation-timing-function: ease-in;
}
}
#keyframes Aleft {
0%,100% {
left:0;
animation-timing-function: ease-in;
}
25%,75% {
left:50%;
animation-timing-function: ease-out;
}
50% {
left:100%;
animation-timing-function: ease-in;
}
}
<div class="box">
<div id="ball1"> </div>
</div>

Ocillate function between two values javascript

I need to have a growing and decreasing circle in made in javascript.
My idea is to use a div with
border-radius : 50%
To get a circle. I need to make it scale from 0.2 to 1 every [x] seconds .
Like It grows from 0.2 to 1 in 5 seconds, then it decreases from 1 to 0.2 in5 seconds too. THen the movement starts again.
I think i have to use sin or cos functions but i don't know how to get this interval depending on time.
I need it to be coupled with a javascript timing function, so that when i satr a timer, the animation begins, and when I pause it it pauses the animation.
Thanks for advice !
One more example of CSS animation which probably better option then javascript:
.circle {
background: coral;
height: 100px;
width: 100px;
border-radius: 50%;
-webkit-animation: pulse 1s ease infinite alternate;
animation: pulse 1s ease infinite alternate;
}
#-webkit-keyframes pulse {
from {
-webkit-transform: scale(1);
}
to {
-webkit-transform: scale(.2);
}
}
<div class="circle"></div>
For Firefox you will need to add prefixless rule
#keyframes pulse {
from { transform: scale(1); }
to { transform: scale(.2); }
}
You could do this with CSS3 animations. Look at this example and change it until it does exactly how you want it.
#circle {
-webkit-animation: oscillate 10s infinite;
animation: oscillate 10s infinite;
border: 1px solid black;
height: 100px;
width: 100px;
}
#-webkit-keyframes oscillate {
0% { border-radius: 20%; }
50% { border-radius: 100%; }
100% { border-radius: 20%; }
}
#keyframes oscillate {
0% { border-radius: 20%; }
50% { border-radius: 100%; }
100% { border-radius: 20%; }
}
<div id="circle">Hi</div>
Use a CSS3 animation set on infinite. Check this fiddle.
#-webkit-keyframes mymove {
0%, 100% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(0.2); }
}
#keyframes mymove {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.2); }
}
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
border-radius:60px;
}

Issue in moving header image in html5

this is my code:
<header>
<div id='animate-area'>
</div>
</header>
css:
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area {
height: 145px;
background-image: url(http://s10.postimg.org/noxw294zd/banner.png);
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
This is JsFIDDLE: http://jsfiddle.net/6d6xa65n/
When run this image-src="img/banner.png" it will show different output. but when i add image src="http://s10.postimg.org/noxw294zd/banner.png", it shows something different from actual output, after completing one time of rotation, need to start from left. and need to remove space left and right side of image.
How to fix this? Can someone help me with us?
This is image i used http://imgur.com/FDbmms0
If I got it right, you need to make these changes:
To remove extra space:
body {
margin: 0;
padding: 0;
}
To make your image rotate back and forth:
#keyframes animatedBackground {
0% { background-position: 0 0; }
50% { background-position: 100% 0; }
100% { background-position: 0 0; }
}
See working demo.
Edit:
I've found this article with basics on how to do the infinite image scroll. But I couldn't make it work with relative width and height (so as author of the technique in his demo), so I've just multiplied original width (1269px) accordingly. Here is the final css:
body {
margin: 0;
padding: 0;
}
#slideshow {
position: relative;
overflow: hidden;
height: 100px;
}
#animate-area {
height: 100%;
width: 2538px;
position: absolute;
left: 0;
top: 0;
background-image: url('http://s10.postimg.org/noxw294zd/banner.png');
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
/* Put your css in here */
#keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-webkit-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-moz-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
So #animate-area is twice as large as image and we just animate to left on full image size. See updated demo.

Categories