0

I'm currently working on a website and I have to do an animation on this shape (created with svg). For the animation I would like do something sober, just a x translation of the right shape when we hover it to obtain a rectangle like that.

HTML:

        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="12.5em" preserveAspectRatio="xMaxYMin slice" class="spaceBetweenButton" >
            <polygon fill="#00a8f3" points="0 0, 83 0, 0 83"/>

            <foreignObject width="24em" height="1em">
                <textArea readonly xmlns="http://www.w3.org/1999/xhtml" style="background-color: transparent; border: none; width: 24em; height: 9em; padding-top: 0.5em; padding-bottom:0;line-height: 1.1em" class="textFont">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in interdum enim. Morbi enim sem</textArea>
            </foreignObject>

            <polygon fill="#00a8f3" class="test" points="85 0, 100 0, 100 100, 0 85"/>  

            <foreignObject width="24em" height="7em">
                <textArea readonly xmlns="http://www.w3.org/1999/xhtml" style="background-color: transparent; border: none; width: 5.5em; height: 10em; line-height: 0.9em" class="buttonFontRight test">Lorem ipsum dolor sit</textArea>
            </foreignObject>

        </svg>

My problem is that I don't know which one choose between CSS @keyframes and SMIL to move the totality of the right shape and what distinguish the two.

Thanks for your help.

Valentin.

Valentin.D
  • 5
  • 2
  • SMIL is being deprecated AFAIK so Keyframes would be optimal. - See https://stackoverflow.com/questions/30965580/deprecated-smil-svg-animation-replaced-with-css-or-web-animations-effects-hover – Paulie_D Jul 10 '19 at 12:07
  • SMIL is not being deprecated. Chrome announced deprecation and then after the hoo hah, announced that they weren't deprecating it after all. – Robert Longson Jul 10 '19 at 12:14

1 Answers1

0

Well if you have just a simple X translation i would suggest to use transform: translateX(-50px) (or how many pixel you need). But if you need to animate something you should use keyframes.

Genc
  • 162
  • 3