1

I'm using a @keyframes to go from 0% to 50% to 100%.
During the percentages I want to change the behaviour of the svg element.

@keyframes scale {
0% {
    transform: scale(0);
    transform-origin: 50% 50%;
}
50% {
    transform: scale(1);
    transform-origin: 50% 50%;
}
100% {
    opacity:0;
}
}

.head_top{ 
    animation: scale 1s ease-in-out 1 backwards;
}

SVG element:

<g><!-- HEAD TOP -->
    <path class="head_top" d="M381,230.571h.008A191.367,191.367,0,0,1,555.278,342.83a177.166,177.166,0,1,0-348.555,0A191.373,191.373,0,0,1,381,230.571Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
</g>

So the element goes at 0% to 50% from a scale(0) to a scale(1)
from 50% to 100% the opacity goes to 0.
This all works. However after the opacity(0) is reached the element goes back to visible.

I think I'm missing something in my @keyframes but can't figure out what!

-----------UPDATE------------
I must be some kind of special stupid but I use the following.

@keyframes fadeout {
0% {
    transform: scale(0);
    transform-origin: 50% 50%;
    opacity:0;
}
50% {
    transform: scale(1);
    transform-origin: 50% 50%;
    opacity:1;
}
100% {
    opacity:0;
}
}
.chin{ 
    animation: fadeout 1s ease-in-out 1 forwards; animation-delay: 2s;  
}

With this SVG:

<g><!-- CHIN -->
    <circle class="chin" cx="414.4" cy="545.4" r="109.5" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="5.012"/>
</g>

The circle is supposed to go from opacity:0; and scale:0; to 1. But at the first frame the circle is fully visible! After that the animation starts and works. Why is the circle visible on the first frame?

Interactive
  • 1,474
  • 5
  • 25
  • 57
  • did you try `0% { transform: scale(0); transform-origin: 50% 50%; opacity: 0;}` – Banzay Feb 01 '17 at 09:28
  • Well it's what `backwards` [fill-mode](https://developer.mozilla.org/en/docs/Web/CSS/animation-fill-mode#Values) does. Did you mean `forwards`? – Kaiido Feb 01 '17 at 09:30

1 Answers1

10

animation-fill-mode:forwards; would seem to be what you're looking for.

The target will retain the computed values set by the last keyframe encountered during execution.

You can set it in the shorthand where it would replace the backwards keyword that you currently have.

html, body {
  width: 100%;
  height: 100%;
}

@keyframes scale {
0% {
    transform: scale(0);
    transform-origin: 50% 50%;
}
50% {
    transform: scale(1);
    transform-origin: 50% 50%;
}
100% {
    opacity:0;
}
}

.head_top{ 
    animation: scale 1s ease-in-out 1 forwards;
}
<svg width="100%" height="100%">
  <g><!-- HEAD TOP -->
    <path class="head_top" d="M381,230.571h.008A191.367,191.367,0,0,1,555.278,342.83a177.166,177.166,0,1,0-348.555,0A191.373,191.373,0,0,1,381,230.571Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
</g>
  </svg>
Robert Longson
  • 118,664
  • 26
  • 252
  • 242