CODEWITHSUNDEEP
htmlcssanimation
Josiah
Josiah

Reputation: 4783

CSS Animations not working?

I'm trying to just do a simple animation where I change a box's color. However, the box never appears, and obviously no animation happens. I have:

<!DOCTYPE HTML>
<html>
<head>
<style>
<div>
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
</div>

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
 ....
</body>
</html>

Why does nothing happen? I'm not really a web developer, but thought I would give this as shot. I seem to have followed all instructions properly, but perhaps I missed something.

As a note, everything here is done locally, this is just in a .html file on my desktop. But it seems like it should still work. Any help appreciated. Thanks.

Upvotes: 1

Views: 370

Answers (2)

Explosion Pills
Explosion Pills

Reputation: 191729

I think you're just having a bad day, but you have 

<style>
<div>
    VARIOUS CSS RULES

You should write it as

<style>
div {
/* snip */
<body>
<div>....</div>

Seems to work though: http://jsfiddle.net/CPL6P/

Upvotes: 3

bizzehdee
bizzehdee

Reputation: 20993

<style>
<div>
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
</div>

should be

<style>
div {
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

Upvotes: 1

Related Questions