My css animation not working?

HTML & CSS
1 
<!DOCTYPE html>
<html>
<head>
    <title>woodpeckers</title>
	<meta charset="utf-8" />
    <style>
	body {
}
#hammer
{
    -webkit-animation: hammer 5s linear 2s infinite;
    -moz-animation: hammer 5s linear 2s infinite;
    animation: hammer 5s linear 2s infinite;
}
@-webkit-keyframes myfirst
 {
     0%  {-webkit-transform: rotateY(360deg);}
    100%  {-webkit-transform: rotateY(360deg);}
}
@keyframes myfirst 
{
    0%  {transform: rotateY(360deg);}
    100%  {transform: rotateY(360deg);}
}
@-moz-keyframes myfirst
 {
     0%  {-moz-transform: rotateY(360deg);}
    100%  {-moz-transform: rotateY(360deg);}
}
	</style>
</head>
<body>
    <center><img id="hammer" src="hammer.png" alt="hammer" width="100" height="100" /></center>
</body>
</html>
2

Because you are rotating from 360 to 360 nothing is happening. Try to Rotate from 0 to 360.

Post edited by cpradio to remove fake signature

3

You have

animation: hammer 5s linear 2s infinite;

so then you need

@keyframes hammer {
}
4

Hi there phani,

try it like this…

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>woodpeckers</title>
<style media="screen">
body {
}
#hammer {
    display: block;
    margin: auto;
    animation: hammer 5s  2s linear infinite;
 }
@keyframes hammer {
    0%    { transform: rotateY(0deg);  }
    100%  { transform: rotateY(360deg);}
 }
</style>
</head>
<body>
 <img id="hammer" src="http://coothead.co.uk/images/anim2.gif" alt="hammer" width="100" height="100">
</body>
</html>

coothead

5

thanks for the help
i got another problem even i am using animation fill mode it is going to initial position. why?

body {
}
#logo
{
    position:absolute;
    top:90%;
    -webkit-animation: logo 5s linear 2s 1;
    -moz-animation: logo 5s linear 2s 1;
     animation: logo 5s linear 2s 1;
    -webkit-animation-delay:7s;
    -moz-animation-delay: 7s;
    animation-delay: 7s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
#wood
{
    position:absolute;
    top:80%;
    transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -webkit-animation: wood 5s linear 2s 1;
    -moz-animation: wood 5s linear 2s 1;
     animation: wood 5s linear 2s 1;
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
    animation-delay: 7s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@-webkit-keyframes wood
 {
     0%  {-webkit-transform: rotate(0deg); }
    100%  {-webkit-transform: rotate(-360deg);}
}
@keyframes wood
{
     0%  {transform: rotate(0deg);}
    100%  {transform: rotate(-360deg);}
}
@-moz-keyframes wood
 {
    0%  {-moz-transform: rotate(0deg); }
    100%  {-moz-transform: rotate(-360deg);}
}
#hammer
{
    position:absolute;
    margin-left:5%;
    -webkit-animation: hammer 5s linear 2s 1;
    -moz-animation: hammer 5s linear 2s 1;
    animation: hammer 5s linear 2s 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@-webkit-keyframes hammer
 {
     0%  {-webkit-transform: rotate(0deg); top:0;}
    90%  {-webkit-transform: rotate(-360deg);top:70%;opacity:1}
    100%{opacity:0}
}
@keyframes hammer
{
     0%  {transform: rotate(0deg); top:0;}
    90%  {transform: rotate(-360deg);top:70%;opacity:1}
    100%{opacity:0}
}
@-moz-keyframes hammer
 {
     0%  {-moz-transform: rotate(0deg); top:0;}
    90%  {-moz-transform: rotate(-360deg);top:70%;}
}
@-webkit-keyframes logo
 {
     0%  {-webkit-transform: rotate(0deg); top:90%;}
    90%  {-webkit-transform: rotate(-300deg);top:0;opacity:1}
    100%{opacity:0}
}
@keyframes logo
{
     0%  {transform: rotate(0deg); top:90%;}
    90%  {transform: rotate(-300deg);top:0;}
}
@-moz-keyframes logo
 {
     0%  {-moz-transform: rotate(0deg); top:0;}
    90%  {-moz-transform: rotate(-300deg);top:70%;}
}

this is my css

6

Because you haven’t defined the relevant properties in the 100% keyframe as that is the one that determines the final position for the fill mode. Otherwise it will just revert to the 0%.

7

but the hamer thing is problem

@-webkit-keyframes hammer
 {
     0%  {-webkit-transform: rotate(0deg); top:0;}
    90%  {-webkit-transform: rotate(-360deg);top:70%;opacity:1}
    100%{opacity:0;}
}
@keyframes hammer
{
     0%  {transform: rotate(0deg); top:0;}
    90%  {transform: rotate(-360deg);top:70%;opacity:1}
    100%{opacity:0;}
}
@-moz-keyframes hammer
 {
     0%  {-moz-transform: rotate(0deg); top:0;}
    90%  {-moz-transform: rotate(-360deg);top:70%;opacity:1}
    100%{opacity:0;}
}
8

That’s not the code that @coothead gave you…

9

i know but he gave me it as example so i learned from it and applying according to my requirements.

10

I gave you the answer but you didn’t implement it. :slight_smile: Please read my post again.[quote=“PaulOB, post:6, topic:227047”]
Because you haven’t defined the relevant properties
[/quote]

In your 100% rule all you have defined is the opacity so that is the only rule that will fill forwards. You also need to add the end position of all the other properties you want to continue at the forwards position (i.e your transforms and top positions).

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.