анимация по ключевым кадрам, почему она не работает, когда текстовая область находится внутри? - PullRequest
Новая
       22

анимация по ключевым кадрам, почему она не работает, когда текстовая область находится внутри?

0 голосов
/ 11 июля 2019

Так что я использую ключевые кадры для небольшой анимации, просто для перемещения фигуры по оси X при наведении курсора и выполнения перевернутого и обратного действия, когда мы не наведем форму, я сделал анимацию с помощью этого кода: 

.rightButton 
{
    animation: slideToTheRight 1s;
}

.rightButton:hover 
{
    animation: slideToTheLeft 1s;
    animation-iteration-count: infinite;
}

@keyframes slideToTheRight
{
    from
    { 
        transform: translateX(-0.15em); 
    }
    to    
    { 
        transform: translateX(0px); 
    }
}

@keyframes slideToTheLeft 
{
    from  
    {
        transform: translateX(0px); 
    }
    to
    { 
        transform: translateX(-0.15em); 
    }
}
<div class="col-lg-12" id="content">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="12.5em" preserveAspectRatio="xMaxYMin slice" class="spaceBetweenButton" >
        <rect fill="white"class="mouse" x="0" y="0" width="100%" height="100%"/>
        <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: 10em" class="textFont">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in interdum enim. Morbi enim sem</textarea>
        </foreignObject>

        <polygon fill="#00a8f3" class="rightButton" points="85 0, 100 0, 100 100, 0 85"/>
        <foreignObject width="24em" height="3em">
            <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 rightButton">Lorem ipsum</textArea>
        </foreignObject>

    </svg>
</div>

Итак, моя проблема в том, что 2-я область текста (у которой есть анимация) не показывает текст и не реализует анимацию.Когда я удаляю эту текстовую область, анимация работает хорошо, но я хочу текст в эту форму.Я новичок в svg и анимации, поэтому не вижу, где моя ошибка.

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

Валентин

...