Html 动画在<；span>；

因此，我正在尝试设置

#txtName

类的动画，它工作正常。我的问题是

。smallletters

在

中被设置为

属性，我无法像

#txtName

那样在页面外开始动画制作。这意味着当我刷新时，我已经看到了

.smallletters

，然后

#txtName

出现并按下

.smallletters

#txtName{
字号：80px；
颜色：#ff6666；
文本转换：大写；
字母间距：0.2米；
位置：相对位置；
顶部：300px；
动画名称：第一；
动画持续时间：4s；
}
@先设置关键帧{
0% {
顶部：10px；
}
50% {
顶部：400px；
}
100% {
顶部：300px；
}
}
.小写字母{
字体大小：40px；
字母间距：0.5em；
显示：内联；
动画名称：第二；
动画持续时间：4s；
}
@关键帧秒{
0% {
顶部：0px；
}
100% {
顶部：300px；
}
}

Oded MenasheHair造型

span

标签默认为

显示：内联

，因此将忽略位置指示（边距、顶部、左侧等）

---

如果要应用（或设置动画）这些属性，请为其设置

display:block

或

inline block

。

您只能设置已定位元素的

top

动画，因此请定位

smalllets

。另外，您的动画是第二个（注意大写字母s）

#txtName{
字号：80px；
颜色：#ff6666；
文本转换：大写；
字母间距：0.2米；
位置：相对位置；
顶部：300px；
动画名称：第一；
动画持续时间：4s；
}
@先设置关键帧{
0% {
顶部：10px；
}
50% {
顶部：400px；
}
100% {
顶部：300px；
}
}
.小写字母{
字体大小：40px；
字母间距：0.5em；
显示：内联；
动画名称：第二；
动画持续时间：4s；
位置：相对位置；
}
@关键帧秒{
0% {
顶部：0px；
}
100% {
顶部：300px；
}
}

Oded MenasheHair造型

不确定你到底想要什么，但根据你真正想要的，你应该改变两三件事：

1.）动画名称的拼写相同（“第二个”与“第二个”），2.

位置：span的相对

，3.

显示：span的内联块

#txtName{
字号：80px；
颜色：#ff6666；
文本转换：大写；
字母间距：0.2米；
位置：相对位置；
顶部：300px；
动画名称：第一；
动画持续时间：4s；
}
@先设置关键帧{
0% {
顶部：10px；
}
50% {
顶部：400px；
}
100% {
顶部：300px；
}
}
.小写字母{
字体大小：40px；
字母间距：0.5em；
显示：内联；
位置：相对位置；
动画名称：第二；
动画持续时间：4s；
}
@关键帧秒{
0% {
顶部：0px；
}
100% {
顶部：300px；
}
}

Oded MenasheHair造型

.smallletters{display:inline block；}

动画和许多其他属性不能应用于内联元素，默认情况下，内联元素是

span

。另外，你的动画是name

Second

（带大写字母S），而不是

Second

（这就是你应用它的方式）。向上投票，但内联或内联块没有区别，这是定位matters@Pete内联块对动画没有影响，但是对于文本相对于其容器的其他部分以特定宽度显示的方式，这就是我添加它的原因。