Pulsing animation for Water Leak sensors

[vajonam]

I built a animation that will pulse an svg element (breathing like) when a binary_sensor changes state. I use these for water sensors.

yaml

rules:
  - entity: binary_sensor.water_04
    element: water.dishwasher
    state_action:
      action: call-service
      service: floorplan.class_set
      service_data:
        class: '${(entity.state === "on") ? "water-on" : "water-off"}'
    tap_action: null

and the needed css. You will name an element in you SVG to match the element: water.dishwasher

css

.water-on {
  animation: breathing 1s ease-out infinite normal;
  stroke: #ee0000 !important;
  fill: #ee0000 !important;
  fill-opacity: 0.60;
  transition: fill 0.5s ease;
  stroke-opacity: 0.75 !important;
  stroke-width: 2px !important;
  transform-box: fill-box;
  transform-origin: center;
}

.water-off {
  stroke: #28ee00 !important;
  transition: fill 0.5s ease;
  stroke-opacity: 0.75 !important;
  stroke-width: 2px !important;
}

@keyframes breathing {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(0.6);
  }

  60% {
    transform: scale(3);
  }

  100% {
    transform: scale(1);
  }
}

[vajonam]

here is the pulsing..