stackoom
  简体   繁体   中英

How to Make Javascript Date and CSS3 Animations work together?

 原文  2014-01-22 05:42:08  6   1    javascript/ jquery/ css3

Question

I need to connect the CSS3 transitions to be aligned with the current time in the Javascript clock. What does this mean? When the clock is at 30 seconds, the border radius of the clock should be turned half blue and half red. The change progresses for every second that passes.

I currently have created a Javascript clock that is working great and posted below. It's one of those 5 o'clock somewhere ones.

I have the CSS3 transitions circulating correctly in look and feel, but it isn't synced up to the Javascript clock. Does anyone know how to do this?

Here is the fiddle : http://jsfiddle.net/LMo/85ePP/3/ 

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 Transitions : 

.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; }
}

1 answers

solution1
 2  2014-01-22 07:53:53

Can you post a http://jsfiddle.net/ example with the code? The best option to achieve what you want is to add the necessary class ( .timerSize4 ) that triggers the animation from the javascript function that drives the clock. You can then add a class with the animation-delay that syncs the 2 clocks.

Something like $("<style>.timerSize4 {animation-delay:"+theNegativeTimerDelayInMs+" ms;}</style>").appendTo("body")

More info on animation-delay can be found here: http://www.w3schools.com/cssref/css3_pr_animation-delay.asp or How can I start CSS3 Animations at a specific spot?

This is an working example: http://jsfiddle.net/85ePP/2/

UPDATE : This are the changes (i also changed the document ready function): 

    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();
});

UPDATE: It worked on Chrome. In firefox it had a space between the seconds and the little s and didn't consider it valid css. It works now. I also changed from seconds to milliseconds so it is more accurate.

UPDATE: This is the full example that works for me: 

 <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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to write CSS3 animations with JavaScript objects? Use Javascript or CSS3 for animations? How come my css3 animations don't work in JQuery? How can I make this Jquery animate() with css3 animations? Memory problems with JavaScript + CSS3 animations. How to improve? For quick Web Animations, Javascript/jQuery or CSS3? JavaScript + CSS3 animations not working properly? Using Javascript to activate CSS3 animations Javascript degradation solutions for CSS3 animations Problems with CSS3 animations and animations following a javascript class switch
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM