css animation changes across browsers

Question

I'm working with animated svg's. The problem is that I get two different behaviors with Chrome and Firefox.

Here's the fiddle. And the css:

@-webkit-keyframes breeze{
    0% {-webkit-transform: rotate(0deg);}
    50% {-webkit-transform: rotate(3deg);}
    100% {-webkit-transform: rotate(0deg);}
}
@keyframes breeze{
    0% {transform: rotate(0deg);}
    50% {transform: rotate(3deg);}
    100% {transform: rotate(0deg);}
}
#pine{
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: breeze 5s ease-out infinite;
    transform-origin: 50% 100%;
    animation: breeze 5s ease-out infinite;     
    }

In Chrome animates the way I want it but in Firefox it takes the rotation point at the top instead of bottom.

Any ideas on how I can make it work?

See this answer: http://stackoverflow.com/a/16708049/1064270. It seems there is some issues with the `svg transform-origin` property in firefox — Gaël Barbin, Apr 08 '15 at 03:20

score 0 · Answer 1 · answered Apr 08 '15 at 02:16

I would suggest using svg only for the pine tree, and using a div with a background color for the background. That should good identical results in FF and Chrome.

.bg {
  background: #ADDDD9;
  width: 559px;
  height: 346px;
}

svg {
  -webkit-transform-origin: 50% 100%;
  -webkit-animation: breeze 5s ease-out infinite;
  transform-origin: 50% 100%;
  animation: breeze 5s ease-out infinite;
}

<div class="bg">
  <!-- svg -->
</div>

I updated the fiddle, take a look. https://jsfiddle.net/k4wz32e6/

You will probably want to re-save your SVG as now the viewbox numbers are way too big.

score 0 · Answer 2 · answered Apr 08 '15 at 02:49

I don't know why the transform-offset isn't working in Firefox, but you can always make things easier for yourself by having the origin coordinates of the object you want to rotate situated at the point you want it to rotate around.

Another advantage of doing it this way is that you can use the exact same CSS rules for trees situated anywhere else in the SVG; just change the translate() attribute of the parent <g> element.

@-webkit-keyframes breeze {
  0% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(3deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@keyframes breeze {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}
#pine {
  -webkit-animation: breeze 5s ease-out infinite;
  animation: breeze 5s ease-out infinite;
}

<svg xmlns="http://www.w3.org/2000/svg" width="559" height="509"
     viewBox="0 0 559 509">
  <rect fill="#ADDDD9" width="559" height="346.7" />
  <g transform="translate(225.5,334.9)">
    <g id="pine">
      <path fill="#B8B6DA" d="M-57.6-86.3 0-320.1 57.5-86.3Z" />
      <path fill="none" stroke="#8D6EA9" stroke-width="3.6"
            stroke-linecap="round" d="M0 0 0-255.7M-20-183.5 0
            -165.6M-27-130.6 0-96.2 23.4-123.8M-13.9-232-.2-211.2
            13.9-218.3M22.2-195.6 1.9-173.1" />
    </g>
  </g>
</svg>

css animation changes across browsers

2 Answers2