We Keep Coding

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>

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>

Bouncing effect using css3 keyframes animation

I am trying bouncing effect using css3 key-frame animation.
here is fiddle link: click
Background of box is changing but my requirement is to give bouncing effect to background image not background color.
What exactly I need: A bouncing(jumping) teddy on trampoline with two states:
(1. with arms up, 2. with arms down) while jumping.
Any ideas how to achieve it? Thank you!

I got solution for this:
.margin{
margin-top:200px;
}
}
/* keyframes definition for WebKit browsers */
#-webkit-keyframes travel {
from { right: 10px; }
to { right: 10px; }
}
#-webkit-keyframes bounce {
from, to {
bottom: 40px;
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 140px;
-webkit-animation-timing-function: ease-in;
}
}
#-webkit-keyframes bounce1 {
from, to {
bottom: 40px;
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 140px;
z-index:9;
-webkit-animation-timing-function: ease-in;
}
}
/* keyframes definition for other browsers */
#keyframes travel {
from { right: 10px; }
to { right: 10px; }
}
#keyframes bounce {
from, to {
bottom: 45px;
animation-timing-function: ease-out;
}
50% {
bottom: 140px;
animation-timing-function: ease-in;
}
}
#keyframes bounce1 {
from, to {
bottom: 45px;
animation-timing-function: ease-out;
}
50% {
bottom: 140px;
z-index:9;
animation-timing-function: ease-in;
}
}
/* styles for the stage and animated elements */
#traveler {
position: absolute;
width: 75px;
height: 100px;
-webkit-animation-name: travel;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-duration:2.8s;
animation-name: travel;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 2.8s;
}
#bouncer {
position: absolute;
width: 75px;
z-index:10;
height: 100px;
border-radius: 10px;
/*background: url(../img/jump.png) no-repeat;*/
background:green;
-webkit-animation-name: bounce;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2.2s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-duration: 2.2s;
}
#bouncer2 {
position: absolute;
z-index:11;
width: 75px;
height: 100px;
border-radius: 10px;
/*background: url(../img/pyonpyon.png) no-repeat;*/
background:red;
-webkit-animation-name: bounce1;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2.2s;
animation-name: bounce1;
animation-iteration-count: infinite;
animation-duration: 2.2s;
}
<div class="margin">
<div id="traveler">
<div id="bouncer"> </div>
<div id="bouncer2"> </div>
</div>
</div>
Fiddle example: https://jsfiddle.net/Sharan_thethy/eyjkpy8u/
Thank you

After sliding in next flexslider slide, css animation is not working

In every flexslider list I have a div which is named class="txt",
and so I need to animate this txt class in every flexslider's list example :
<div class='flexslider'>
<ul>
<li><div class="txt">lorem ipsum</div></li>
<li><div class="txt">lorem ipsum</div></li>
<li><div class="txt">lorem ipsum</div></li>
</ul>
</div>
But only the first class="txt" in list of flexslider is animating by css below, others in list whenever I click next are not getting the animation, what should i do ?
Here is the animation code I'm using for txt class :
-webkit-animation: aniload 1s;
-moz-animation: aniload 1s;
-ms-animation: aniload 1s;
-o-animation: aniload 1s;
animation: aniload 1s;
#-webkit-keyframes aniload {
from {-webkit-transform:translate(0px, 1000px)}
to {-webkit-transform:translate(0px, 0px)}
}

You can delay your other animations http://jsfiddle.net/o3yftL2o/2/
.txt_a{
-webkit-animation: aniload 1s;
-moz-animation: aniload 1s;
-ms-animation: aniload 1s;
-o-animation: aniload 1s;
animation: aniload 1s;
-webkit-animation-delay:1s;
}
#-webkit-keyframes aniload {
0% {-webkit-transform:translate(0px, 1000px)}
100% {-webkit-transform:translate(0px, 0px)}
}
.txt_b{
-webkit-animation: aniload2 1s;
-moz-animation: aniload2 1s;
-ms-animation: aniload2 1s;
-o-animation: aniload2 1s;
animation: aniload2 1s;
-webkit-animation-delay:.5s;
}
#-webkit-keyframes aniload2 {
from {-webkit-transform:translate(0px, 1000px)}
to {-webkit-transform:translate(0px, 0px)}
}
.txt_c{
-webkit-animation: aniload3 1s;
-moz-animation: aniload3 1s;
-ms-animation: aniload3 1s;
-o-animation: aniload3 1s;
animation: aniload3 1s;
-webkit-animation-delay:0s;
}
#-webkit-keyframes aniload3 {
from {-webkit-transform:translate(0px, 1000px)}
to {-webkit-transform:translate(0px, 0px)}
}