Mit der Angabe 'steps(n)' wird eine CSS3 Animation in (n) Teile ihrer Dauer zerteilt. Statt der normal gewünschten flüssigen Animation, können so getaktete Animationen erzeugt werden.

Als Beispiel habe ich hier eine Uhr in HTML geschrieben, deren Zeiger wie bei einer klassischen Analog Uhr von einem Ziffernblatt Strich zum nächsten springen.

HTML
<div id="clock">
<!-- Stundenzeiger -->
<div id="hubH" class="hub">
<div id="indicatorH"></div>
</div>
<!-- Minutenzeiger -->
<div id="hubM" class="hub">
<div id="indicatorM"></div>
</div>
<!-- Sekundenzeiger -->
<div id="hubS" class="hub">
<div id="indicatorS"></div>
</div>
</div>

Jeder Zeiger ist absolut zur Zeigerachse (class="hub") positioniert. Auf dem Ziffernblatt entspricht jeder Strich 6deg.
Die Steps für die Zeiger:

  • Sekunde: 60s für eine Drehung (360deg) verteilt auf 60 Steps = 6deg/sek
  • Minute: 3600s (=60min) für 360deg mit 60 Steps = 6deg/min
  • Stunde: 86400s (=12h) für 360deg mit 96 Steps = 6deg/12min
CSS
#clock {background:url(clockface.png) no-repeat; background-size:90%; background-position:50% 50%; position:relative; padding:0;}
.hub {width:1px; height:1px; position:absolute; left:50%; top:50%;}
#indicatorS {position:absolute; width:1px; background:#C33;}
#indicatorM {position:absolute; left-1; width:3px; background:#aaaaaa; border-radius:2px;}
#indicatorH {position:absolute; left:-2px; width:5px; background:#777; border-radius:2px;}
#hubS{animation: indicatorS 60s steps(60, end) infinite;}
#hubM{animation: indicatorM 3600s steps(60, end) infinite;}
#hubH{animation: indicatorH 86400s steps(96, end) infinite;}
#hubS:after{transform:rotate(-45deg); content:''; position:absolute; top:-12px; left:-12px; background:url(logo.png); background-size: cover; width:24px; height:24px;}
@keyframes indicatorS{
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
@keyframes indicatorM{
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
@keyframes indicatorH{
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}

Die Uhr stellen

Allein mit der CSS Deklaration würde die Uhr immer um 00:00:00 starten. Mit diesem JQuery Script wird die Uhr bei Seitenaufruf mit der tatsächlichen (Browser)-Zeit gestartet. Da JQuery nicht auf die CSS Keyframes Deklaration zugreifen kann, wird das Script mit dem PreFixFree.js Plugin erweitert.

JQuery:
(function($){
$(window).load(function(){
var d = new Date();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();$(function(){
var startS = s*6
var endS = startS+360
$.keyframe.define([{
name: 'indicatorS',
'0%': {'transform' : 'rotate('+startS+'deg)'},
'100%': {'transform' : 'rotate('+endS+'deg)'}
}]);
})
var startM = m*6;
$('#hubM').css({'animation-delay':61-s+'s','transform':'rotate('+startM+'deg)'});
$(function(){
var startMdelay = (m+1)*6
var endM = startMdelay+360
$.keyframe.define([{
name: 'indicatorM',
'0%': {'transform' : 'rotate('+startMdelay+'deg)'},
'100%': {'transform' : 'rotate('+endM+'deg)'}
}]);
})
$(function(){
var startH = h*30+m/2
var endH = startH+360
$.keyframe.define([{
name: 'indicatorH',
'0%': {'transform' : 'rotate('+startH+'deg)'},
'100%': {'transform' : 'rotate('+endH+'deg)'}
}]);
})
})
(function($){
$(window).on("load resize orientationchange",function(e){
var rWidth = 0;
var rWidth = $('#clock').outerWidth();
$('#clock').css('height',rWidth);
$('#indicatorS').css({'height':rWidth/2+20,'top':-rWidth/2+rWidth/8-20});
$('#indicatorM').css({'height':rWidth/2-30,'top':-rWidth/2+rWidth/15+30});
$('#indicatorH').css({'height':rWidth/2-70,'top':-rWidth/2+rWidth/15+70});
console.log('width'+rWidth)
});
})(jQuery);

Tags: html5 JQuery

Quick Menu

Go-Lux.de verwendet Cookies.

Mit der Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies verwenden. Hinweise zum Datenschutz 

OK