CODEWITHSUNDEEP
htmlcss
ArabianMaiden
ArabianMaiden

Reputation: 527

Why wouldn't my CSS @keyframe animation work?

Hi wonderful coders of the world! Newbie to coding here, and even after checking answers to various other questions on stackoverflow, I cannot seem to resolve this simple @keyframe code.

My Html:

<!DOCTYPE html>

<html>

<head>

<title>blank</title>
<link rel="stylesheet" href="@keyframes & animation.css"/>

</head>

<body>

<div class="div"></div>

</body>

</html>

My CSS:

.div {

width:100px;
height:100px;
background-color: red;
animation-name: Flashlights;
animation-duration: 3s;
-webkit-animation-name: Flashlights;
-webkit-animation-duration: 3s;

{

@keyframes Flashlights /* "Flashlights" is my own name - not an attribute. */ {

0% {background-color: red;}
20% {background-color: pink;}
30% {background-color: brown;}
40% {background-color: grey;}
50% {background-color: yellow;}
60% {background-color: orange;}
70% {background-color: white;}
80% {background-color: green;}
90% {background-color: blue;}
100% {background-color: black;}

}

@-webkit-keyframes Flashlights {

0% {background-color: red;}
20% {background-color: pink;}
30% {background-color: brown;}
40% {background-color: grey;}
50% {background-color: yellow;}
60% {background-color: orange;}
70% {background-color: white;}
80% {background-color: green;}
90% {background-color: blue;}
100% {background-color: black;}

}

That's it. I'm studying each element and then trying them on my own, but this one doesn't seem to work..

Upvotes: 2

Views: 2998

Answers (3)

CmdrSharp
CmdrSharp

Reputation: 1070

Part of the reason is that you're not using the same name for the keyframes everywhere. Also, make sure to close the div CSS class - you're leaving it open, breaking the keyframe class.

div {
}

Working jsFiddle

Upvotes: 2

GMchris
GMchris

Reputation: 5648

Well, there's several things I've noticed. Firstly, your first animation is called Flashinglights rather than Flashlights, which is what's used everywhere else. Then there are some problems with your brackets. The first animation doesnt have an opening bracket, and the .div selector's closing bracket isn't facing the right way, it's currently just another opening bracket.

Upvotes: 2

Matthew Lymer
Matthew Lymer

Reputation: 977

The second bracket is the wrong type (change { to } directly after the div css)

Upvotes: 2

Related Questions