<分区>
我正在尝试使用 CSS 中的动画属性从左向右移动一个 div。但代码无法正常工作。
我是 CSS 动画属性的新手。我已经引用了 W3Schools 和 StackOverFlow 中的一些文章，但仍然没有成功。
#title {
font-size: 8.5em;
font-weight: bold;
color: goldenrod;
animation: move 3s ease;
animation-direction: normal;
}
@keyframes move {
from {
left: 0;
}
to {
left: 200px;
}
}<div id="title">Soy Boos</div>Soy Boos 这个词应该从左向右移动
最佳答案
嘿@Gan 阅读关于 left property来自 w3schools 它有以下定义和用法
left 属性影响定位元素的水平位置。此属性对非定位元素没有影响。
• 如果position:absolute；或位置:固定； - left 属性将元素的左边缘设置为其最近定位祖先的左边缘左侧的一个单位。
• 如果position:relative； - left 属性将元素的左边缘设置为其正常位置左侧/右侧的一个单位。
• 如果位置:粘性； - 当元素在视口(viewport)内时，left 属性的行为就像它的位置是相对的，而当它在视口(viewport)外时，它的位置是固定的。
• 如果位置:静态； - left 属性无效。
所以您只需将 position 属性添加到您的 #title 元素，left 属性就可以工作...
#title{
font-size: 8.5em;
font-weight: bold;
color: goldenrod;
animation: move 3s ease;
animation-direction: normal;
position:relative; /* this one */
}
@keyframes move{
from {left:0;}
to {left:200px;}
}<div id="title">Soy Boos</div>关于html - 为什么我的动画属性在 CSS 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55806232/