1
Hallo wunderbare Programmierer der Welt! Neuling zum Codieren hier, und selbst nachdem ich Antworten zu verschiedenen anderen Fragen auf stackoverflow überprüft habe, kann ich nicht scheinen, diesen einfachen @keyframe Code aufzulösen.Warum funktioniert meine CSS @ keyframe-Animation nicht?
Meine Html:
<!DOCTYPE html>
<html>
<head>
<title>blank</title>
<link rel="stylesheet" href="@keyframes & animation.css"/>
</head>
<body>
<div class="div"></div>
</body>
</html>
Meine 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;}
}
Das ist es. Ich bin jedes Element zu studieren und sie dann auf meinem eigenen Versuch, aber dies scheint nicht zu arbeiten ..
Das ist eine etwas seltsame Dateinamen ist, Sie etwas traditionellere, wie animations.css versuchen könnte? Nicht sicher, ob es tatsächlich ein Problem verursachen würde. – GMchris
} Klammer -ist das Problem – sTx