CODEWITHSUNDEEP
cssanimationcss-animations
QR-Code990
QR-Code990

Reputation: 13

Css Keyframes & Animation will not run on either Google Chrome or Firefox

I'm attempting to recreate the "jumping" game that you have with Google Chrome when the internet is out. I attempted to follow documentation and online videos but whatever I do I can't get the animation potion of the CSS code to take effect. I've tested in codeply and it will not work there as well. I've attempted to look over the vendor prefixes and those don't seem to help as well. I've tested on Google Chrome and the Fire fox, they are both up to date. Any suggestions?

I have attached the CSS Code Below.

 * {
  padding: 0;
  margin: 0;
}
#game{
  width:700px;
  height:200px;
  border: 1px solid black;
}
#character{
  width:20px;
  height: 50px;
  background-color: red;
  position: relative;
  top: 150px;
}
#block{
  width:20px;
  height: 20px;
  background-color: blue;
  position: relative;
  top: 130px;
  left: 480px;
  -webkit-animation: block ls infinite linear;
}
@-webkit-keyfames block
{
  0% { left: 480px; }
  100% { left: -40px; }
}

Upvotes: 0

Views: 1184

Answers (1)

JHeth
JHeth

Reputation: 8346

You need to declare the default keyframes rule not just the webkit prefix.

#block{
  width:20px;
  height: 20px;
  background-color: blue;
  position: relative;
  top: 130px;
  left: 480px;
  animation: block 1s infinite linear;
  -webkit-animation: block 1s infinite linear;
}
@keyframes block {
  0% { left: 480px; }
  100% { left: -40px; }
}
@-webkit-keyframes block
{
  0% { left: 480px; }
  100% { left: -40px; }
}

Also your timing on the -webkit-animation was a lowercase L I think you meant to put a 1 there.

Edit: Keyframes was also misspelled as noted by @disinfor and the animation would work in Chrome and FF without the default @keyframes/animation rules, also with the default and without the prefix making it purely a spelling error issue.

Upvotes: 2

Related Questions