クリスマスがやってくると、クリスマスカウントダウンをコーディングするのに最適な時期だと思っていました。私はJavaScriptとHTMLの罰金を乗り越えることができましたが、CSSに何らかの問題を持ち始めました。あなたは、コードを見れば、あなたは私が@keyframesとすべてを使用してCSS animationを挿入しようとしていることがわかりますCSSアニメーションが完全に機能していませんか？
//Gets the HTML Elements
var head = document.getElementById('head');
var subhead = document.getElementById('subhead');
var counter = document.getElementById('counter');
//finds Christmas
var christmas = new Date('December 25, 2016 00:00:00');
//Updates Timer
function updateTimer(christmas) {
var time = christmas - new Date();
//Gives what to find on update
return {
'days': Math.floor(time/(1000 * 60 * 60 * 24)),
'hours': Math.floor((time/(1000 * 60 * 60)) % 24),
'minutes': Math.floor((time/1000/60) % 60),
'seconds': Math.floor((time/1000) % 60),
'total': time
};
};
//Starts the timer
function startTimer(counter, christmas) {
var timerInterval = setInterval(function() {
var timer = updateTimer(christmas);
//Changes the text of the 'counter'
counter.innerHTML = '<span>' + timer.days + '</span>'
+ '<span>' + timer.hours + '</span>'
+ '<span>' + timer.minutes + '</span>'
+ '<span>' + timer.seconds + '</span>';
//if christmas
if(timer.total < 1) {
clearInterval(timerInterval);
counter.innerHTML = '<span>0</span><span>0</span><span>0</span><span>0</span>';
head.innerHTML = "It's Christmas!!!";
subhead.innerHTML = "Merry Christmas to all!!!";
}
//if christmas eve
else if (timer.days < 1){
subhead.innerHTML = "It is currently Christmas Eve! How much longer until Christmas Day???";
}
}, 1000); //timer updates every second
};
window.onload = function() {
startTimer(counter, christmas);
};*:focus {
outline: none;
}
body {
background-color: #991f00;
text-shadow: 2px 2px 8px #000000;
}
header {
color: white;
text-align: center;
font-family: 'Cinzel Decorative', sans-serif;
}
#clock span {
float: left;
text-align: center;
margin: 0 2.5%;
padding: 20px;
width: 20%;
box-sizing: border-box;
color: white;
font-family: 'Mountains of Christmas', sans-serif;
font-size: 40px;
}
#counter span {
background-color: #000000;
border-radius: 100%;
animation-name: colorChange;
animation-duration: 6s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
@keyframes colorChange {
0%, 100% {
background-color: #42f471;
}
50% {
background-color: #ea524f;
}
}<!DOCTYPE html>
<html>
<head>
<title>Christmas Countdown</title>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>!-->
<script type="text/javascript" src="scripts/script.js" async></script>
<!--<script type="text/javascript" src="scripts/color.js" async></script>!-->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative|Mountains+of+Christmas" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="clock">
<header>
<h1 id="head">Christmas Countdown!</h1>
<h4 id="subhead">How much longer until Christmas? Check the clock to find out!</h4>
</header>
<div id="count-container">
<div id="counter"></div>
<div id="labels">
<span>Days</span>
<span>Hours</span>
<span>Minutes</span>
<span>Seconds</span>
</div>
</div>
</div>
</div>
</body>
</html>：ここに私のコードのすべてです。私はここで見つけた効果を得ることを試みていた：https://kahoot.it/#/、ただし2色（#42f471および#ea524f）を使用して。私の考えは、私が#42f471に退色する#ea524fにフェードする開始色として#42f471を作るということでした。私はアニメーションの長さを6sに設定しようとしましたが、ページを読み込んだときに、アニメーションが途中でなくても突然最初の色に戻ってきていないことがわかりました。より長い時間をかけてみると、その色を元の色に戻す前に、それまで通り抜けることができます。興味深いことに、より短い継続時間はアニメーションのより多くを通過させます。 1s以下では、アニメーションが正しく実行されますが、その速度は速すぎます（私は誰にも発作を与えないようにしたいのです:)）。私はインターネットを検索して検索しましたが、私が試したことは何も役立っていません。私はアニメーションで多くの経験を持っていないので、私はインターネットの研究から得たアニメーションを作るのにほとんどすべてのものを使用しました。
いずれの回答もありがとうございます。私は、必要に応じて、JavaScriptやJqueryを使用した回答にもオープンしています。
はい、これが動作しなければなりません！私はそれがJavaScriptと何か関係があるかもしれないと思っていました。どうもありがとうございます！ –