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

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>

Related

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>

Keyframe animation flickering on scaling Firefox

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.

Stop infinite animation in preloader

I´m now working on preloader for webpage, but cant figure how to stop the animation, so the javascript could to it's work and fade the preloader away.
Basically heres the whole situation and I just can't get it working right.
$(window).load(function() {
$('.cssload-whirlpool').fadeOut();
$('.preloader').delay(350).fadeOut('slow');
$('body').delay(350).css({'overflow':'visible'});
})
.preloader {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: white;
z-index: 99999;
}
.cssload-container {
position: relative;
}
.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgb(204, 204, 204);
border-left-color: rgb(0, 0, 0);
border-radius: 974px;
-o-border-radius: 974px;
-ms-border-radius: 974px;
-webkit-border-radius: 974px;
-moz-border-radius: 974px;
}
.cssload-whirlpool {
margin: -24px 0 0 -24px;
height: 49px;
width: 49px;
animation: cssload-rotate 1150ms linear infinite;
-o-animation: cssload-rotate 1150ms linear infinite;
-ms-animation: cssload-rotate 1150ms linear infinite;
-webkit-animation: cssload-rotate 1150ms linear infinite;
-moz-animation: cssload-rotate 1150ms linear infinite;
}
.cssload-whirlpool::before {
content: "";
margin: -22px 0 0 -22px;
height: 43px;
width: 43px;
animation: cssload-rotate 1150ms linear infinite;
-o-animation: cssload-rotate 1150ms linear infinite;
-ms-animation: cssload-rotate 1150ms linear infinite;
-webkit-animation: cssload-rotate 1150ms linear infinite;
-moz-animation: cssload-rotate 1150ms linear infinite;
}
.cssload-whirlpool::after {
content: "";
margin: -28px 0 0 -28px;
height: 55px;
width: 55px;
animation: cssload-rotate 2300ms linear infinite;
-o-animation: cssload-rotate 2300ms linear infinite;
-ms-animation: cssload-rotate 2300ms linear infinite;
-webkit-animation: cssload-rotate 2300ms linear infinite;
-moz-animation: cssload-rotate 2300ms linear infinite;
}
#keyframes cssload-rotate {
100% {
transform: rotate(360deg);
}
}
#-o-keyframes cssload-rotate {
100% {
-o-transform: rotate(360deg);
}
}
#-ms-keyframes cssload-rotate {
100% {
-ms-transform: rotate(360deg);
}
}
#-webkit-keyframes cssload-rotate {
100% {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes cssload-rotate {
100% {
-moz-transform: rotate(360deg);
}
}
<div class="preloader">
<div class="cssload-whirlpool"></div>
</div>
Would appriciate any help :-)
Thank you.
Are you missing this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
$(window).load(function() {
$('.cssload-whirlpool').fadeOut();
$('.preloader').delay(350).fadeOut('slow');
$('body').delay(350).css({'overflow':'visible'});
})
.preloader {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: white;
z-index: 99999;
}
.cssload-container {
position: relative;
}
.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgb(204, 204, 204);
border-left-color: rgb(0, 0, 0);
border-radius: 974px;
-o-border-radius: 974px;
-ms-border-radius: 974px;
-webkit-border-radius: 974px;
-moz-border-radius: 974px;
}
.cssload-whirlpool {
margin: -24px 0 0 -24px;
height: 49px;
width: 49px;
animation: cssload-rotate 1150ms linear infinite;
-o-animation: cssload-rotate 1150ms linear infinite;
-ms-animation: cssload-rotate 1150ms linear infinite;
-webkit-animation: cssload-rotate 1150ms linear infinite;
-moz-animation: cssload-rotate 1150ms linear infinite;
}
.cssload-whirlpool::before {
content: "";
margin: -22px 0 0 -22px;
height: 43px;
width: 43px;
animation: cssload-rotate 1150ms linear infinite;
-o-animation: cssload-rotate 1150ms linear infinite;
-ms-animation: cssload-rotate 1150ms linear infinite;
-webkit-animation: cssload-rotate 1150ms linear infinite;
-moz-animation: cssload-rotate 1150ms linear infinite;
}
.cssload-whirlpool::after {
content: "";
margin: -28px 0 0 -28px;
height: 55px;
width: 55px;
animation: cssload-rotate 2300ms linear infinite;
-o-animation: cssload-rotate 2300ms linear infinite;
-ms-animation: cssload-rotate 2300ms linear infinite;
-webkit-animation: cssload-rotate 2300ms linear infinite;
-moz-animation: cssload-rotate 2300ms linear infinite;
}
#keyframes cssload-rotate {
100% {
transform: rotate(360deg);
}
}
#-o-keyframes cssload-rotate {
100% {
-o-transform: rotate(360deg);
}
}
#-ms-keyframes cssload-rotate {
100% {
-ms-transform: rotate(360deg);
}
}
#-webkit-keyframes cssload-rotate {
100% {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes cssload-rotate {
100% {
-moz-transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="preloader">
<div class="cssload-whirlpool"></div>
</div>
This might be a stupid thing, but I got it working by implementing jQuery in my codepen.
// StackOverflow requires code in order to link codepens!
$(window).load(function() {
$('.cssload-whirlpool').fadeOut();
$('.preloader').delay(350).fadeOut('slow');
$('body').delay(350).css({'overflow':'visible'});
})
http://codepen.io/anon/pen/xOokwG
EDIT: Turns out it wasn't :).

Javascript Event Listner Issue

The console in the Chrome developer tools shows no errors, the div loads, but the animation play state remains paused - what am I doing wrong?
document.getElementById("design").addEventListener("webkitAnimationEnd", animation);
function animation(){
"use strict";
document.getElementById("profile").classList.add("animation");
location.href = "#profile";
}
CSS
#design {
position: relative;
-webkit-animation: mixdesign;
-webkit-animation-play-state: running;
-webkit-animation-duration: 30s;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
z-index: 8;
}
/* Profile */
#profile {
position: relative;
-webkit-animation: profile;
-webkit-animation-duration: 30s;
-webkit-animation-play-state: paused;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
.animation { -webkit-animation-play-state: running; }
As you were assigning class once transition ends, the existing class css property that takes priority over.
You can make it override them using the !important keyword.
Fiddle here
document.getElementById("design").addEventListener("webkitAnimationEnd", animation);
function animation() {
"use strict";
document.getElementById("profile").classList.add("animation");
}
#design {
position: relative;
-webkit-animation: design;
-webkit-animation-play-state: running;
-webkit-animation-duration: 3s;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
z-index: 8;
}
/* Profile */
#profile {
position: relative;
-webkit-animation: profile;
-webkit-animation-duration: 3s;
-webkit-animation-play-state: paused;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
.animation {
-webkit-animation-play-state: running!important;
}
#-webkit-keyframes design {
10%, 90% {
-webkit-opacity: 1;
}
0%,
100% {
-webkit-opacity: 0;
}
}
/* Profile: (Animation) */
#-webkit-keyframes profile {
10%, 90% {
-webkit-opacity: 1;
}
0%,
100% {
-webkit-opacity: 0;
}
}
<div id="design">Design</div>
<div id="profile">profile</div>

div hide and show in loop

How can I create a Road divider animation with one animating after another immediately? please find the following link for issue example
http://jsfiddle.net/shantnuraj/36XeK/1/
HTML:
<div id="tech-slideshow">
<div id="tech-slideshow-1" class="tech-slideshow-1">dfsd</div>
<div id="tech-slideshow-2" class="tech-slideshow-1">dfs</div>
<div id="tech-slideshow-3" class="tech-slideshow-1">dfsd</div>
<div id="tech-slideshow-4" class="tech-slideshow-1">dfs</div>
<div id="tech-slideshow-5" class="tech-slideshow-1">fsd</div>
<div id="tech-slideshow-6" class="tech-slideshow-1">dfs</div>
</div>
CSS:
.devider-marque img.devider {
margin-top: 0px;
}
#tech-slideshow {
height: 500px;
position: absolute;
overflow: hidden;
left: 50%;
width: 50px;
bottom: 0;
}
#tech-slideshow > div {
width: 50px;
background:#000;
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#tech-slideshow-1 {
margin-top: -200px;
-webkit-animation: moveSlideshow1 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-2 {
margin-top: -400px;
-webkit-animation: moveSlideshow2 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-3 {
margin-top: -600px;
-webkit-animation: moveSlideshow3 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-4 {
margin-top: -800px;
-webkit-animation: moveSlideshow4 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-5 {
margin-top: -1000px;
-webkit-animation: moveSlideshow5 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-6 {
margin-top: -1200px;
-webkit-animation: moveSlideshow6 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#-moz-keyframes moveSlideshow1 {
0% {top:0; height:150px;}
10% {top:20;height:150px;}
100% {top:1200px;height:150px;}
}
#-webkit-keyframes moveSlideshow1 {
0% {top:0; height:150px;}
10% {top:20;height:150px;}
100% {top:1200px;height:150px;}
}
Hello Here is your answer with fiddle
use transition-delay instead of margin-top
#Anydiv {
animation-name: moveSlideshow1;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 1s; [ adding transition delay +1 to next div in loop will make it smoother ]
}
i have just edited fiddle in hurry so i have added animation parameter seperately you can use shorthand :)
Fiddle http://jsfiddle.net/krunalp1993/36XeK/4/
Hope it helps you :)
You can control the speed by setting animation time value.
-webkit-animation: moveSlideshow6 3s linear infinite;
-moz-animation: moveSlideshow1 3s linear infinite;

Categories