如何讓Javascript日期和CSS3動畫一起工作？

我需要連接CSS3轉換以便與Javascript時鐘中的當前時間對齊。這是什麼意思？當時鍾在30秒時，時鐘的邊界半徑應該變成半藍和半紅。每經過一秒，變化就會進行。如何讓Javascript日期和CSS3動畫一起工作？

我目前已經創建了一個工作良好，併發布在下面的Javascript時鐘。這是5點鐘之一。

我有CSS3轉換在外觀和感覺上正確循環，但它沒有同步到Javascript時鐘。有誰知道如何做到這一點？

function updateClock () { 
    var currentTime = new Date (); 
    var currentHoursRaw = currentTime.getHours (); 
    var currentHours = currentTime.getHours (); 
    var currentMinutes = currentTime.getMinutes (); 
    var currentSeconds = currentTime.getSeconds (); 

    // Pad the minutes and seconds with leading zeros, if required 
    currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes; 
    currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds; 

    // Compose the string for display 
    var currentTimeString = "5" + ":" + currentMinutes + ":" + currentSeconds; 

    if(currentHoursRaw == 1) { 
    $("#time").html(currentTimeString + "<br/>" +"<span>Area '8'</span>"); 
    //target iframe.attribute replace with the other area 
    } 
    if(currentHoursRaw == 2) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '7'</span>"); 
    } 
    if(currentHoursRaw == 3) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '6'</span>"); 
    } 
    if(currentHoursRaw == 4) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '5'</span>"); 
    } 
    if(currentHoursRaw == 5) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '4'</span>"); 
    } 
    if(currentHoursRaw == 6) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '3'</span>"); 
    } 
    if(currentHoursRaw == 7) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '2'</span>"); 
    } 
    if(currentHoursRaw == 8) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '1'</span>"); 
    } 
    if(currentHoursRaw == 9) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area 'UTC'</span>"); 
    } 
    if(currentHoursRaw == 10) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-1'</span>"); 
    } 
    if(currentHoursRaw == 11) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-2'</span>"); 
    } 
    if(currentHoursRaw == 12) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-3'</span>"); 
    } 
    if(currentHoursRaw == 13) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-4'</span>"); 
    } 
    if(currentHoursRaw == 14) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-5'</span>"); 
    } 
    if(currentHoursRaw == 15) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-6'</span>"); 
    } 
    if(currentHoursRaw == 16) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-7'</span>"); 
    } 
    if(currentHoursRaw == 17) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-8'</span>"); 
    } 
    if(currentHoursRaw == 18) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-9'</span>"); 
    } 
    if(currentHoursRaw == 19) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-10/+14'</span>"); 
    } 
    if(currentHoursRaw == 20) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-11/+13'</span>"); 
    } 
    if(currentHoursRaw == 21) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '12'</span>"); 
    } 
    if(currentHoursRaw == 22) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '11'</span>"); 
    } 
    if(currentHoursRaw == 23) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '10'</span>"); 
    } 
    if(currentHoursRaw == 24) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '9'</span>"); 
    } 
} 

$(document).ready(function(){ 
    setInterval('updateClock()', 1000); 
});

CSS過渡：

.timerSize4 { 
    -webkit-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
    position: absolute; 
    z-index: 7; 
    width: 433px; 
    height: 433px; 
    border-radius: 50%; 
} 

#timer4 { 
    opacity: .7; 
    top: 24%; 
    left: 37%; 
    background-color: #99182d; 

/* Plays an animation with the same speed from beginning to end */ 
    -webkit-animation-timing-function: steps(1); 
    animation-timing-function: steps(1); 

    -webkit-animation-duration: 60s; 
    animation-duration: 60s; 

    -webkit-animation-name: timerBGChange; 
    animation-name: timerBGChange; 
    z-index: -1; 
} 

/* deals with the right half ot he circle */ 
#timer4a { 
    background-color: #02266e; 
    /* Clip property lets you specify a rectangle to clip an absolutey position element*/ 
    clip:rect(0px,216.5px,433px,0px); 
    -webkit-animation-timing-function: linear,steps(1); 
    animation-timing-function: linear,steps(1); 

    -webkit-animation-duration: 30s,60s; 
    animation-duration: 30s,60s; 

    -webkit-animation-name: timerRotate,timerBGChange2; 
    animation-name: timerRotate,timerBGChange2; 
    z-index: 7; 
} 

/* deals with second half of circle */ 
#timer4b { 
    background-color: #02266e; 
    clip:rect(0,433px,433px,216.5px); 
    -webkit-animation-timing-function: steps(1); 
    animation-timing-function: steps(1); 

    -webkit-animation-duration: 60s; 
    animation-duration: 60s; 

    -webkit-animation-name: timerBG1; 
    animation-name: timerBG1; 
    z-index: 7; 
} 

/* blue on right side unil it hits 30 */ 
#timer4c { 
    background-color: #02266e; 
    clip:rect(0px,216.5px,433px,0px); 
    -webkit-animation-timing-function: steps(1); 
    animation-timing-function: steps(1); 

    -webkit-animation-duration: 60s; 
    animation-duration: 60s; 

    -webkit-animation-name: timerBG2; 
    animation-name: timerBG2; 
    z-index: 7; 
} 

@-webkit-keyframes timerBGChange { 
    0% { background-color: #02266e; }  
    50% { background-color: #99182d; }  
} 

@-webkit-keyframes timerRotate { 
    0% { -webkit-transform:rotate(0); } 
    100% { -webkit-transform:rotate(360deg); }  
} 
@-webkit-keyframes timerBGChange2 { 
    0% { background-color: #99182d; } 
    50% { background-color: #02266e; }  
} 
@-webkit-keyframes timerBG1 { 
    0% { opacity: 0; background-color: #99182d; } 
    25% { opacity: 1; } 
    50% { opacity: 0; background-color: #02266e; } 
    75% { opacity: 1; } 
} 
@-webkit-keyframes timerBG2 { 
    0% { opacity: 1; } 
    25% { opacity: 0; background-color: #99182d; } 
    50% { opacity: 1; } 
    75% { opacity: 0; background-color: #02266e; } 
} 

@keyframes timerBGChange { 
    0% { background-color: #02266e; }  
    50% { background-color: #99182d; }  
} 

@keyframes timerRotate { 
    0% { transform:rotate(0); } 
    100% { transform:rotate(360deg); }  
} 
@keyframes timerBGChange2 { 
    0% { background-color: #99182d; } 
    50% { background-color: #02266e; }  
} 
@keyframes timerBG1 { 
    0% { opacity: 0; background-color: #99182d; } 
    25% { opacity: 1; } 
    50% { opacity: 0; background-color: #02266e; } 
    75% { opacity: 1; } 
} 
@keyframes timerBG2 { 
    0% { opacity: 1; } 
    25% { opacity: 0; background-color: #99182d; } 
    50% { opacity: 1; } 
    75% { opacity: 0; background-color: #02266e; } 
}

來源

2014-01-22 LMo

您可以張貼http://jsfiddle.net/例子的代碼？實現所需目標的最佳選擇是添加必要的類（.timerSize4），以便從驅動時鐘的javascript函數中觸發動畫。然後，您可以添加一個同步2個時鐘的animation-delay類。

喜歡的東西$("<style>.timerSize4 {animation-delay:"+theNegativeTimerDelayInMs+" ms;}</style>").appendTo("body")

動漫延遲

這是一個工作示例： http://jsfiddle.net/85ePP/2/

UPDATE：這是更改（我也改變了文檔就緒功能）：

function startTimer(){ 

    var currentTime = new Date(); 
    var currentSeconds = currentTime.getSeconds(); 
    var currentMs = -currentTime.getMilliseconds()-currentSeconds*1000; 
    $("<style>.timerSize4 {animation-delay: "+currentMs+"ms;-webkit-animation-delay: "+currentMs+"ms;}</style>").appendTo("head"); 
    updateClock(); 
    setInterval(function(){updateClock();}, 1000); 
} 
$(document).ready(function(){ 
    startTimer(); 
});

更新：它在Chrome上工作。在Firefox中秒和小S之間有一個空格，並沒有認爲它是有效的CSS。它現在有效。我也從幾秒變爲了幾毫秒，所以它更準確。

UPDATE：這是對我的作品的完整的例子：

<style> 
/* CLOCK */ 

.clock-container { 
    left: 29.5%; 
    position: absolute; 
    top: 8%; 
    z-index: 20; 
} 

#clock { 
    background:rgba(2,38,110,.95); 
    border-radius: 50%; 
    height: 22.1875em; 
    margin-top: 48%; 
    text-align: center; 
    text-transform: uppercase; 
    width: 22.1875em; 
    left: 48%; 
    position: relative; 
    z-index: 10; 
} 

#time { 
    font-family: 'Gotham-Black'; 
    font-size:60px; 
    letter-spacing: 3px; 
    text-align: center; 
    padding-top:138px; 
    z-index: 10; 
} 

span { 
    display: inline; 
    margin-top: 10px; 
    font-family: 'Gotham-Medium'; 
    font-size: 16px; 
} 


/*CODE FROM BEN'S PURE CSS CLOCK 
http://lab.thisisbensblog.com/purecssclock/ 
*/ 

.timerSize4 { 
    -webkit-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
    position: absolute; 
    z-index: 7; 
    width: 433px; 
    height: 433px; 
    border-radius: 50%; 
} 

#timer4 { 
    opacity: .7; 
    top: 24%; 
    left: 37%; 
    background-color: #99182d; 

/* Plays an animation with the same speed from beginning to end */ 
    -webkit-animation-timing-function: steps(1); 
    animation-timing-function: steps(1); 

    -webkit-animation-duration: 60s; 
    animation-duration: 60s; 

    -webkit-animation-name: timerBGChange; 
    animation-name: timerBGChange; 
    z-index: -1; 
} 

/* deals with the right half ot he circle */ 
#timer4a { 
    background-color: #02266e; 
    /* Clip property lets you specify a rectangle to clip an absolutey position element*/ 
    clip:rect(0px,216.5px,433px,0px); 
    -webkit-animation-timing-function: linear,steps(1); 
    animation-timing-function: linear,steps(1); 

    -webkit-animation-duration: 30s,60s; 
    animation-duration: 30s,60s; 

    -webkit-animation-name: timerRotate,timerBGChange2; 
    animation-name: timerRotate,timerBGChange2; 
    z-index: 7; 
} 

/* deals with second half of circle */ 
#timer4b { 
    background-color: #02266e; 
    clip:rect(0,433px,433px,216.5px); 
    -webkit-animation-timing-function: steps(1); 
    animation-timing-function: steps(1); 

    -webkit-animation-duration: 60s; 
    animation-duration: 60s; 

    -webkit-animation-name: timerBG1; 
    animation-name: timerBG1; 
    z-index: 7; 
} 

/* blue on right side unil it hits 30 */ 
#timer4c { 
    background-color: #02266e; 
    clip:rect(0px,216.5px,433px,0px); 
    -webkit-animation-timing-function: steps(1); 
    animation-timing-function: steps(1); 

    -webkit-animation-duration: 60s; 
    animation-duration: 60s; 

    -webkit-animation-name: timerBG2; 
    animation-name: timerBG2; 
    z-index: 7; 
} 

@-webkit-keyframes timerBGChange { 
    0% { background-color: #02266e; }  
    50% { background-color: #99182d; }  
} 

@-webkit-keyframes timerRotate { 
    0% { -webkit-transform:rotate(0); } 
    100% { -webkit-transform:rotate(360deg); }  
} 
@-webkit-keyframes timerBGChange2 { 
    0% { background-color: #99182d; } 
    50% { background-color: #02266e; }  
} 
@-webkit-keyframes timerBG1 { 
    0% { opacity: 0; background-color: #99182d; } 
    25% { opacity: 1; } 
    50% { opacity: 0; background-color: #02266e; } 
    75% { opacity: 1; } 
} 
@-webkit-keyframes timerBG2 { 
    0% { opacity: 1; } 
    25% { opacity: 0; background-color: #99182d; } 
    50% { opacity: 1; } 
    75% { opacity: 0; background-color: #02266e; } 
} 

@keyframes timerBGChange { 
    0% { background-color: #02266e; }  
    50% { background-color: #99182d; }  
} 

@keyframes timerRotate { 
    0% { transform:rotate(0); } 
    100% { transform:rotate(360deg); }  
} 
@keyframes timerBGChange2 { 
    0% { background-color: #99182d; } 
    50% { background-color: #02266e; }  
} 
@keyframes timerBG1 { 
    0% { opacity: 0; background-color: #99182d; } 
    25% { opacity: 1; } 
    50% { opacity: 0; background-color: #02266e; } 
    75% { opacity: 1; } 
} 
@keyframes timerBG2 { 
    0% { opacity: 1; } 
    25% { opacity: 0; background-color: #99182d; } 
    50% { opacity: 1; } 
    75% { opacity: 0; background-color: #02266e; } 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script> 

function updateClock () { 
    var currentTime = new Date (); 

    var currentHoursRaw = currentTime.getHours (); 
    var currentHours = currentTime.getHours (); 
    var currentMinutes = currentTime.getMinutes (); 
    var currentSeconds = currentTime.getSeconds (); 

    // Pad the minutes and seconds with leading zeros, if required 
    currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes; 
    currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds; 

    // Compose the string for display 
    var currentTimeString = "5" + ":" + currentMinutes + ":" + currentSeconds; 

    if(currentHoursRaw == 1) { 
    $("#time").html(currentTimeString + "<br/>" +"<span>Area '8'</span>"); 
    } 
    if(currentHoursRaw == 2) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '7'</span>"); 
    } 
    if(currentHoursRaw == 3) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '6'</span>"); 
    } 
    if(currentHoursRaw == 4) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '5'</span>"); 
    } 
    if(currentHoursRaw == 5) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '4'</span>"); 
    } 
    if(currentHoursRaw == 6) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '3'</span>"); 
    } 
    if(currentHoursRaw == 7) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '2'</span>"); 
    } 
    if(currentHoursRaw == 8) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '1'</span>"); 
    } 
    if(currentHoursRaw == 9) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area 'UTC'</span>"); 
    } 
    if(currentHoursRaw == 10) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-1'</span>"); 
    } 
    if(currentHoursRaw == 11) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-2'</span>"); 
    } 
    if(currentHoursRaw == 12) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-3'</span>"); 
    } 
    if(currentHoursRaw == 13) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-4'</span>"); 
    } 
    if(currentHoursRaw == 14) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-5'</span>"); 
    } 
    if(currentHoursRaw == 15) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-6'</span>"); 
    } 
    if(currentHoursRaw == 16) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-7'</span>"); 
    } 
    if(currentHoursRaw == 17) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-8'</span>"); 
    } 
    if(currentHoursRaw == 18) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-9'</span>"); 
    } 
    if(currentHoursRaw == 19) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-10/+14'</span>"); 
    } 
    if(currentHoursRaw == 20) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '-11/+13'</span>"); 
    } 
    if(currentHoursRaw == 21) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '12'</span>"); 
    } 
    if(currentHoursRaw == 22) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '11'</span>"); 
    } 
    if(currentHoursRaw == 23) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '10'</span>"); 
    } 
    if(currentHoursRaw == 24) { 
    $("#time").html(currentTimeString + "<br/>" + "<span>Area '9'</span>"); 
    } 
} 
function startTimer(){ 

    var currentTime = new Date (); 
    var currentSeconds = currentTime.getSeconds(); 
    var currentMs = -currentTime.getMilliseconds()-currentSeconds*1000; 
    $("<style>.timerSize4 {animation-delay: "+currentMs+"ms; -webkit-animation-delay: "+currentMs+"ms;}</style>").appendTo("head"); 
    //$(".clock-container>.timerSize4").attr("id","timer4"); 
    updateClock(); 
    setInterval(function(){updateClock();}, 1000); 
} 
$(document).ready(function(){ 
    startTimer(); 
}); 

</script> 
</head> 
<body> 
<div class="clock-container"> 
    <div id="clock"> 
     <p id="time"></p> 
    </div> 
    <div id="timer4" class="timerSize4"> 
     <div id="timer4a" class="timerSize4"></div> 
     <div id="timer4b" class="timerSize4"></div> 
     <div id="timer4c" class="timerSize4"></div> 
    </div> 
</div><!-- clock container --> 
</body>

來源

2014-01-22 07:53:53

這裏是小提琴。出於某種原因，我無法將時鐘加載到小提琴中 - 不確定所有設置。 http://jsfiddle.net/LMo/85ePP/1/ – LMo

小提琴在這裏工作：http://jsfiddle.net/LMo/85ePP/3/ – LMo

有一個工作的例子與我的答案同步（最後） –

如何讓Javascript日期和CSS3動畫一起工作？

回答

相關問題