1
こんにちは、世界の素晴らしいコーダーです！初心者がここでコーディングし、さらにstackoverflowに関する他のさまざまな質問への回答を確認した後も、この単純な@keyframeコードを解決できないようです。私のCSS @keyframeアニメーションはなぜ機能しませんか？
マイHTML：
<!DOCTYPE html>
<html>
<head>
<title>blank</title>
<link rel="stylesheet" href="@keyframes & animation.css"/>
</head>
<body>
<div class="div"></div>
</body>
</html>
マイ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;}
}
それです。私は、各要素を勉強して、自分でそれをしようとしているが、これが動作するようには思えない...
、あなたは、animations.cssなど、より伝統的な何かを試みることができますか？それが実際に問題を引き起こすかどうかはわかりません。 – GMchris
}ブラケット - 問題です – sTx