Question

因此，我将关键帧用于一些动画，仅用于在悬停时在X轴上移动形状，并在不悬停形状时执行还原和还原动作，我使用以下代码制作了动画： / p>

.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>

所以现在我的问题是，第二个文本区域（有动画）不显示文本，也没有实现动画。当我删除该文本区域时，动画效果很好，但是我希望文本变成这种形状。我是svg和动画的初学者，所以我看不出我的错误在哪里。

感谢您的帮助。

瓦伦丁

关键帧动画，为什么在textarea里面时它不起作用？

0 个答案: