Dienstag, 26. Juni 2018

CSS color transition animation

Mit der CSS Eigenschaft (Property) "transition" können HTML-Elemente animiert werden, doch die Möglichkeiten sind begrenzt. CSS transition benötigt ein auslösendes Event. Mit Javascript ist es ebenfalls möglich HTML-Elemente zu animieren, auch ohne auslösendes Event.

Die CSS Eigenschaft "transition" ist erst ab IE 10 verfügbar.
Einige der Selektoren (Selector) für auslösende Events sind erst ab IE 10 verfügbar.

Liste der Selektoren für auslösende Events bei CSS transition:

  • :hover (mouse hover, IE7) 
  • :target (link clicking, IE9)
  • :focus (IE8)
  • :valid (form fields, IE10)
  • :checked (checkboxes, IE9)
  • :active (link clicking, IE7)
  • :disabled (form fields, IE9)
  • :invalid (form fields, IE10)

Mit Javascript eröffnen sich viel mehr Möglichkeiten HTML-Elemente zu animieren. Im folgenden ein Beispiel zur Animierung von "border-color" einer div-box.

Mittels Javascript wird der Wert von "border-color" einer div-box geändert. Dazu wird der hexadezimale Farbwert (#ff0000) als RGB Farbwert (255000000) als Anfangswert genutzt. Zur Berechnung neuer Übergangswerte wird der hexadezimale Farbwert als RGB Ausgangs-Farbwert in die einzelnen Farbwerte Rot Grün Blau (255 000 000) aufgespalten. Nach der Neuberechnung der einzelnen RGB-Farbwerte werden diese zu einzelnen hexadezimalen Farbwerten umgewandelt (ff cc cc) und anschließend zu einem neuen hexadezimalen Farbwert zusammengefügt (#ffcccc).

CSS
.divborder {
  border-style: dashed;
  border-color: #ff0000;
}
HTML
<div class="divborder">CSS color transition animation</div>
<div id="divcolor"></div>
Javascript
var bordercolorr = 255;
var bordercolorgb = 0;
var bordercolorinterval = setInterval(frame, 50);
function frame() {
if (bordercolorr == 204) {
clearInterval(bordercolorinterval);
} else {
bordercolorr = bordercolorr;
bordercolorgb = bordercolorgb + 4;
if (bordercolorgb > 203) {
bordercolorr = bordercolorr - 1;
bordercolorgb = 204;
}
bordercolorrxhex = bordercolorr.toString(16);
bordercolorgbxhex = bordercolorgb.toString(16);
if (bordercolorgbxhex.length == 1) {
bordercolorgbxhex = "0" + bordercolorgbxhex;
}
document.getElementsByClassName("divborder")[0].style.borderColor = '#' + bordercolorrxhex + "" + bordercolorgbxhex + "" + bordercolorgbxhex;
document.getElementById("divcolor").innerHTML = "border-color: "+ "#" + bordercolorrxhex + "" + bordercolorgbxhex + "" + bordercolorgbxhex;
}}
JSFIDDLE:  http://jsfiddle.net/ocd3ujtb/94/

Das Javascript kann beliebig verändert und umgestaltet werden. Es ist möglich jedes HTML-Element zu animieren. Nicht nur "border-color", sondern auch "background-color" oder "color", sowie width and height oder vieles mehr.

Keine Garantie. Keine Gewähr. Kein Support.