CSS 动画效果不佳？

Question

随着圣诞节的临近，我认为现在是编写圣诞节倒计时代码的最佳时机。我能够顺利通过 JavaScript 和 HTML，但开始遇到 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>

如果您查看代码，您会发现我尝试使用 @keyframes 插入 CSS animation 等等。我试图在这里找到效果： https://kahoot.it/#/ ，但是只使用 2 种颜色（#42f471 和 #ea524f）。我的想法是，我会将 #42f471 作为起始颜色，然后渐变为 #ea524f，然后渐变回 #42f471。我开始尝试将动画的持续时间设置为 6s 但是当我加载页面时，我发现动画似乎甚至没有进行到一半，然后突然闪回到第一种颜色。尝试更长的持续时间，只会让它在闪回原来的颜色之前经历更少。不过，有趣的是，较短的持续时间使其经历了更多的动画。在 1s 或更少时，它会正确地播放动画，但速度太快了（我不想最终让任何人癫痫发作 :)）。我在互联网上搜索了又搜索，但我尝试过的任何操作都无济于事。我没有太多的动画经验，所以几乎所有我用来制作动画的东西都是从互联网上研究得到的。

如有任何答案，我们将不胜感激。如有必要，我也愿意使用 JavaScript 或 Jquery 来回答问题。

Answer 1

你的根本缺陷是你每秒重新创建 DOM 元素，而动画设置为 6s。

而不是像您在此处所做的那样重新创建 DOM：

counter.innerHTML = '<span>' + timer.days + '</span>'
                   + '<span>' + timer.hours + '</span>'
                    + '<span>' + timer.minutes + '</span>'
                    + '<span>' + timer.seconds + '</span>';

您需要单独更改每个 span 的内部文本，因此不会重新创建 span 本身。

Answer 2

请注意，每次计时器更新时动画都会重新开始 - 这是因为那些 DOM 元素正在由您的 JavaScript 重新创建，因此动画会从它们开始。通过像这样给它们每个 ID 来定位你的跨度，你会看到动画保持：

//Gets the HTML Elements
var head = document.getElementById('head');
var subhead = document.getElementById('subhead');
var counterDays = document.getElementById('days');
var counterHours = document.getElementById('hours');
var counterMinutes = document.getElementById('minutes');
var counterSeconds = document.getElementById('seconds');
//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(counterDays, counterHours, counterMinutes, counterSeconds, christmas) {
    
    var timerInterval = setInterval(function() {
        var timer = updateTimer(christmas);
        
        //Changes the text of the 'counter'
        counterDays.innerHTML = timer.days;
        counterHours.innerHTML = timer.hours;
        counterMinutes.innerHTML = timer.minutes;
        counterSeconds.innerHTML = timer.seconds;
        
        //if christmas
        if(timer.total < 1) {
            clearInterval(timerInterval);
            counterDays.innerHTML = 0;
            counterHours.innerHTML = 0;
            counterMinutes.innerHTML = 0;
            counterSeconds.innerHTML = 0;
            
            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(counterDays, counterHours, counterMinutes, counterSeconds, 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">
                        <span id="days">&nbsp;</span>
                        <span id="hours">&nbsp;</span>
                        <span id="minutes">&nbsp;</span>
                        <span id="seconds">&nbsp;</span>
                    </div>
                    <div id="labels">
                        <span>Days</span>
                        <span>Hours</span>
                        <span>Minutes</span>
                        <span>Seconds</span>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS 动画效果不佳？

CSS animation not fully working?

html

css

animation

background-color

keyframe