CODEWITHSUNDEEP
animationsvgsmil
Jannis
Jannis

Reputation: 13

animate keyframes inside smil animateTransform

I'm currently working on an animation using animateTransform

<animateTransform xmlns="http://www.w3.org/2000/svg" attributeName="transform" type="scale" additive="sum" begin="mouseenter" from="1" to="1.2" dur="1" />

This works fine so far but one thing is missing, I wanna create a smooth animation, so the start should match the endpoint. Unfortunately I cant find a way to set multiple Keyframes.

In css it would look like this

@keyframe foo {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.2);
  }
  100%{
    transform: scale(1);
  }
}

Any Ideas how to create an animation like this within the svg/ animateTransform tag ?

Upvotes: 1

Views: 659

Answers (1)

ccprog
ccprog

Reputation: 21821

In SMIL syntax, the counterpart to the CSS keyframes syntax is to use values and keyTimes attributes containing semicolon-separated lists:

<animateTransform xmlns="http://www.w3.org/2000/svg"
    attributeName="transform" type="scale" additive="sum"
    begin="mouseenter" dur="1"
    values="1;1.2;1" keyTimes="0;0.5;1 />

The use of from/to and values is mutually exclusive.

Both lists must have exactly the same number of items. keyTime values are floating point value between 0 and 1, representing proportions of the duration. Each successive time must be greater than or equal to the preceding time value. For continuous animations, the first time value must be 0 and the last 1.

Upvotes: 2

Related Questions