Mushroom - Icones animés

Entraide Home Assistant
21

comment je le fait correspondre a l’icone a animer?

22

moon est le nom du keyframe, change juste le nom du keyframe dans la ligne animation pour avoir l’effet souhaiter

23

Yes, compris, j’ai corrigé ça devrait le faire, merci beaucoup!

Tant que je t’es tu saurais surement comment animé l’icone du thermomètre, j’ai bricolé ça:

card_mod:
  style: |
    ha-card:active {
      transform: scale(0.975);
      transition: 0s;
    }
    :host {
      --mush-card-primary-font-size: 16px;
    }
    mushroom-shape-icon {
      --icon-symbol-size: 0.80em;
      --icon-size: 90px;
    }
    ha-state-icon {
      animation: charge 3s linear infinite;
    }
    @keyframes charge {
      0%, 80% { clip-path: inset(0 0 0 0); }
      10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
      20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
      30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
      40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
      50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
      60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
      70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
    }

Mais du coup, la partie qui monte est beaucoup trop grosse, je trouve pas ou réduire dans le keyframes…
image

24

Désoler, mais mets connaissance on des limites :wink:
Je suis pas un pro de l’animation, je n’utilise que pulse et blink.
Un autre utilisateur pourra t’aider.

1 « J'aime »