Fan animation moving when CSS applied

[Fidzero]

Hello,

I've been following along with the examples provided at https://experiencelovelace.github.io/ha-floorplan/docs/examples/ I am trying to replicate the fan functionality found on the Floorplanner Home Example, of a fan that can be turned on and off by clicking the icon and then having the icon rotate one the entity is "on" in home assistant. I have also included the multiple levels from the Multi Floor example. No matter what I try when I click the Element the Element moves its physical location on the card (moves to very top left), gets small and does begin its animation rotation.

I am using the CSS code and yaml code (albeit with my entity ID and Element names changed for my use case) from the Floorplanner Home Example. Any thoughts on solutions?

[OzGav]

You will need to post your CSS so we can see what you have and the YAML for your fan. Please make sure to format it with the <> button.

[OzGav]

OK yours is different to what I use. Try replacing your animation section with:

@keyframes rotation {
		from {
			-moz-transform: rotate(0deg);
               -webkit-transform: rotate(0deg);
                       transform: rotate(0deg);
		}
		to {
			-moz-transform: rotate(360deg);
             -webkit-transform: rotate(360deg);
                     transform: rotate(360deg);
		}
}

#fan\.upstairs_bathroom_fan,  {
          transform-origin: center;
  -webkit-transform-origin: center;         /* This affects iPad Safari */
     -moz-transform-origin: center;
	  -ms-transform-origin: center;
	    	       
}

.fan-on {
  animation: rotation 2s infinite linear;
  transform-box: fill-box;
  transform-origin: center;
}

And your yaml with (I have saved you a couple of lines by removing defaults)

            - element: Upper-Bath-Fan
              entity: fan.upstairs_bathroom_fan
              tap_action:
                service: fan.toggle
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state === "on") ? "fan-on" : ""}'

[Fidzero]

Using your exact CSS and YAML results in the same outcome. I've made a GIF of it here to hopefully help.

[OzGav]

I had a similar issue the other week when I added a new fan. It ended up being something in the SVG. I was able to copy and paste another that worked but that doesn't help you! My fan icon is a PNG. How have you made yours? I think maybe I had the issue when it was a group of objects (PNG and a circle)

[OzGav]

You could try maybe

.fan-on, fan-on * {
  animation: rotation 2s infinite linear;
  transform-box: fill-box;
  transform-origin: center;
}

[Fidzero]

I had a similar issue the other week when I added a new fan. It ended up being something in the SVG. I was able to copy and paste another that worked but that doesn't help you! My fan icon is a PNG. How have you made yours? I think maybe I had the issue when it was a group of objects (PNG and a circle)

This was the correct answer. I deleted my other fan, found a fan PNG icon off the internet, imported it into the SVG file and everything worked. Appreciate the help!

[Mythrix]

I had the same issue just now, it turns out that it was because Adobe Illustrator used a transform to position the PNG instead of using the tag's X and Y attributes. So when the CSS modified the transform options, it also affected the positioning.

When I reinserted the PNG using Inkscape instead, it used proper X and Y attributes instead, so the animation worked without moving the image.