CSS @keyframes или SMIL, какой выбрать для анимации?

Question

В настоящее время я работаю над сайтом, и мне нужно сделать анимацию для этой формы (созданной с помощью svg).Для анимации я хотел бы сделать что-то трезвое, просто x перевод правильной формы, когда мы наведем на нее курсор, чтобы получить прямоугольник, такой как , который .

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>

Моя проблема в том, что я не знаю, какой выбрать между CSS @keyframes и SMIL, чтобы переместить всю правильную фигуру и что отличает их.

Спасибо за вашу помощь.

Валентин.

Answer 1

Ну, если у вас есть простой перевод X, я бы предложил использовать transform: translateX(-50px) (или сколько пикселей вам нужно). Но если вам нужно что-то оживить, вы должны использовать ключевые кадры.