为什么我的文本没有使用关键帧进行动画处理？

Question

我正在尝试使用关键帧让我的文本从左到右移动，但是它不起作用，因为它只是保持静止。我该如何解决这个问题，感谢您的帮助。注意：这只是大块代码的一部分。

代码：

.text1{
    position: absolute;
    bottom: 50%;
    left: 0px;
    font-size: 20px;
    font-family: Power Green, Arial;
    .animation-name: lefttoright;
    animation-duration: 3s;

}

@keyframes lefttoright{
    from{
        left: 0px;
    }
    to{
        left: 100px;
    }
}

<div class="text1">
    <h1>ABOUT</h1>  
</div>

Answer 1

只需将 .animation-name 更改为 animation-name

.text1{
    position: absolute;
    bottom: 50%;
    left: 0px;
    font-size: 20px;
    font-family: Power Green, Arial;
    animation-name: lefttoright;
    animation-duration: 3s;

}

@keyframes lefttoright{
    from{
        left: 0px;
    }
    to{
        left: 100px;
    }
}

<div class="text1">
    <h1>ABOUT</h1>  
</div>

为什么我的文本没有使用关键帧进行动画处理？

Why isn't my text animating with keyframes?

html

css

animation

text

css-animations