Untitled

type: custom:mushroom-template-card
icon: mdi:robot-vacuum
icon_color: cyan
primary: Пылесос
card_mod:
  style: |
    ha-state-icon {
      {% if is_state('vacuum.roborock_s6_8687_robot_cleaner','docked') %}
        --card-mod-icon: mdi:robot-vacuum;
        animation: vacuum 12s ease infinite;
      {% else %}
        --card-mod-icon: mdi:robot-vacuum-off;
      {% endif %}
    }
    .switch-button {
      {% if is_state('vacuum.roborock_s6_8687_robot_cleaner','docked') %}
        background-image: linear-gradient(transparent, rgba(0,255,2,0.2));
      {% else %}
      {% endif %}
    }
    @keyframes vacuum {
      0%, 5%   { transform: translate(0px,0px) rotate(0deg); }
      10%      { transform: translate(0px,0px) rotate(90deg); }
      15%, 20% { transform: translate(5px,0px) rotate(90deg); }
      25%      { transform: translate(5px,0px) rotate(0deg); }
      30%, 35% { transform: translate(5px,-5px) rotate(0deg); }
      40%      { transform: translate(5px,-5px) rotate(-90deg); }
      45%, 50% { transform: translate(-5px,-5px) rotate(-90deg); }
      55%      { transform: translate(-5px,-5px) rotate(-180deg); }
      60%, 65% { transform: translate(-5px,5px) rotate(-180deg); }
      70%      { transform: translate(-5px,5px) rotate(-270deg); }
      75%, 80% { transform: translate(0px,5px) rotate(-270deg); }
      85%      { transform: translate(0px,5px) rotate(-360deg); }
      90%,100% { transform: translate(0px,0px) rotate(-360deg); }
    }