FHEM Forum

FHEM => Frontends => Thema gestartet von: wkarl am 29 November 2014, 13:09:10

Titel: Über CSS Icons blinken lassen
Beitrag von: wkarl am 29 November 2014, 13:09:10
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:
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
Titel: Antw:Über CSS Icons blinken lassen
Beitrag von: prime1009 am 02 Dezember 2014, 13:11:02
Und ?
Funktioniert es ?
Titel: Antw:Über CSS Icons blinken lassen
Beitrag von: wkarl am 02 Dezember 2014, 15:05:00
Babe mich wohl missverständlich ausgedrückt - ja, funktioniert wunderbar.
Ciao walter
Titel: Antw:Über CSS Icons blinken lassen
Beitrag von: RainerH am 16 Januar 2018, 22:44:26
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; }
    }
Titel: Antw:Über CSS Icons blinken lassen
Beitrag von: Burny4600 am 03 Februar 2018, 17:24:04
Wo genau wird die Ergänzung eingefügt um ein bestimmtes Icon blinken zu lassen?