Über CSS Icons blinken lassen

[wkarl]

Hallo,

ich möchte bestimmte Status-Icons in meinen floorplans blinken lassen, wenn sie einen kritischen Status erreichen. Folgendes habe ich im Internet gefunden und auf meine Bedürfnisse angepasst:

Code Auswählen Erweitern

svg.icon.measure_battery_25 {
    display:block;
    -webkit-animation-name: color-pulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
    animation-name: color-pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}
@-webkit-keyframes color-pulse {
  0% { fill:red; }
  100% { opacity:0; }
}
@keyframes color-pulse {
  0% { fill:red; }
  100% { opacity:0; }
}

ciao walter

[prime1009]

Und ?
Funktioniert es ?

[wkarl]

Babe mich wohl missverständlich ausgedrückt - ja, funktioniert wunderbar.
Ciao walter

[RainerH]

Vielen Dank, funktioniert super.
Habe es für den Müllsack verwendet:

.bag {
    display:block;
    -webkit-animation-name: color-pulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
    animation-name: color-pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    }

@-webkit-keyframes color-pulse {
    0%   { opacity:0; }
    100% { opacity:1; }
    }

[Burny4600]

Wo genau wird die Ergänzung eingefügt um ein bestimmtes Icon blinken zu lassen?