CODEWITHSUNDEEP
htmlcss
Cobra Slasher
Cobra Slasher

Reputation: 9

How to make animations code work in css? [ the code isn't working for me...]

I can't seem to find my mistake can you please help me?

I have put the -webkit- prefixes, also all elements are Valid

here's the code:

 div {
width:200px;
height:200px;
background-color:red;

-webkit-animation-name: easter;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: reverse;

}
@-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
<div>
hi
</div>

I expected it to move but I don't know what my mistake is in the code

Upvotes: 0

Views: 55

Answers (3)

Ced
Ced

Reputation: 1539

Additional information to the answer of @Hien Nguyen, I would suggest you to use the following syntax when using animations ans working with @keyframes in order to increase browsers comptability:

/* Safari 4.0 - 8.0 */
@-webkit-keyframes easter {
  from {top: 0px;}
  to {top: 200px;}
}

/* Standard syntax */
@keyframes easter {
  from {top: 0px;}
  to {top: 200px;}
}

Instead of:

@-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}

Upvotes: 0

Hien Nguyen
Hien Nguyen

Reputation: 18975

You need add position :relative; to your css

div {
width:200px;
height:200px;
background-color:red;
 position :relative;
-webkit-animation: easter 5s infinite;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: reverse;
animation: easter 5s infinite;
}
@-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
<!DOCTYPE html>
<html>
<head>
<style> 

</style>
</head>
<body>

<div>
hi
</div>
</body>

Upvotes: 1

SuperDJ
SuperDJ

Reputation: 7661

First of all the webkit prefix will only apply to chromium based browsers. Second in order for top to apply you need to specifiy a position like absolute or relative:

div {
  width:200px;
  height:200px;
  background-color:red;
  position: absolute;

  -webkit-animation-name: easter;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-delay:1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: reverse;
  animation-name: easter;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-delay:1s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

@-webkit-keyframes easter {
  from {top: 0px;}
  to {top: 200px;}
}
<div>
hi
</div>

Upvotes: 0

Related Questions