CSS动画没有完全正常工作？

时间：2016-12-23 00:30:06

标签： html css animation background-color keyframe

随着圣诞节的到来，我认为这将是编写圣诞节倒计时的最佳时机。我能够很好地完成JavaScript和HTML，但开始遇到CSS问题。这是我的所有代码：

let addon = require('./build/Release/addon')

addon.parallelProduct(2000)
addon.serialProduct(2000)

//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>和所有内容插入CSS animation。我试图在此处找到效果：https://kahoot.it/#/，但只使用2种颜色（@keyframes和#42f471）。我的想法是，我会将#ea524f作为起始颜色，然后渐渐变为#42f471，这也会淡化回#ea524f。我开始尝试将动画的持续时间设置为#42f471但是当我加载页面时，我发现动画似乎甚至没有进入中途，然后突然闪回第一种颜色。尝试更长的持续时间，只会让它在闪回原始颜色之前经历更少的时间。有趣的是，较短的持续时间使其经历了更多的动画。在6s或更低，它将正确地通过动画，但速度太快（我不想最终给任何人癫痫发作:)）。我搜索并搜索了互联网，但我尝试过的任何东西都没有帮助。我对动画没有多少经验，所以我用来制作动画的几乎所有东西都来自于互联网上的研究。

任何答案都表示赞赏。如有必要，我也可以使用JavaScript或Jquery获得答案。

2 个答案:

答案 0 :(得分：3)

请注意，每次定时器更新时动画都会重新启动 - 这是因为JavaScript正在重新创建这些DOM元素，因此动画将重新开始。通过为每个ID提供这样的ID来定位您的跨度，并且您将看到动画保持：

＆＃13;
＆＃13; 
//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);
};
＆＃13; 
*: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;
    }
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

而不是像你在这里那样重新创建DOM：

// array of booleans initialized to false
boolean[] array = new boolean[chosenQ.length]; 

for (int x = 0 ; x < chosenQ.length ; x++) 
{
       int i = r.nextInt(9); 
       // check if value was chosen already 
       while (array[i] == true)
           i = r.nextInt(9); 

       // set generated value's index in array to true
       array[i] = true; 

       chosenQ[x] = i;
       c.println(chosenQ[x]);
}

您需要单独更改每个counter.innerHTML = '<span>' + timer.days + '</span>' + '<span>' + timer.hours + '</span>' + '<span>' + timer.minutes + '</span>' + '<span>' + timer.seconds + '</span>'; 的内部文本，因此不会重新创建范围。

相关问题
最新问题