CSS3从底部到最终状态的转换div 100px的简写

尝试做一个过渡效果，当用户第一次进入页面时，div“caption”从其最终静止位置下方100px开始，并向上设置动画。这是我在CSS中使用的代码，但它似乎不起作用

.caption { padding: 0 0 0 0; transition: padding 0.25s ease-in-out 1.0s 0 0 100px 0; }

我相信你可以动画填充以及顶部。两种方法都试过，但都不管用。这里会有什么？

不要使用“.”因为您说过您使用的是标题div not class。 而且不可能检测到用户或页面已在css中加载，因此必须使用jQuery或其他方法。 这是CSS

    caption
            {
                transition:all 0.3s ease 0s;
                -moz-transition:all 0.3s ease 0s;
                -webkit-transition:all 0.3s ease 0s;}

我正在使用jQuery

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $("caption").css("padding-bottom", "100px");
});
</script>

$（文档）.ready（函数（e）{
$（“标题”）.css（“填充底部”、“100px”）；
});

---

希望这能帮助您：）

最终状态值不能像下面的代码那样附加到

转换

属性的值中。属性值只能是有关应转换的属性、转换持续时间、延迟和计时函数等的详细信息

转换：填充0.25s轻松输入输出1.0s0 100px 0；
^  
|_从现在开始的一切都是错误的

另一件需要注意的事情是，

转换

不是美国案例的正确选择。只有当元素上的属性由于某些操作（如

：hover

、

：focus

、使用JS单击添加新类等）而发生更改时，才会发生转换。在页面加载时，没有纯CSS方式触发

转换。您可以使用脚本和基于超时的自动触发状态更改，但我觉得这对于可以使用CSS以不同方式实现的事情来说是不必要的复杂

您已向转换添加了延迟，但这并不表示转换应自动开始的时间。它表示应用状态更改后应经过的时间，在此时间之前可以开始转换


动画应用于在页面加载时自动触发更改。与转换不同，它们是自动调用的。您可以阅读更多有关CSS动画的信息

要将元素从其最终静止位置下方的100px设置为顶部动画，可以使用以下属性之一：


页边距顶部
top
（可用于
绝对定位的元素）

translateY（）

使用页边距顶部：


。标题{
显示：内联块；
页边距顶部：100px；/*起始位置*/
动画：向上移动1s线性向前；
/*值为[动画名称][动画持续时间][动画计时功能][动画填充模式]*/
}
@关键帧向上移动{
到{
边缘顶部：0px；/*最终静止位置*/
}
}
/*只是为了演示*/
.标题{
高度：2米；
宽度：10em；
线高：2米；
背景：番茄；
}

这是一个标题
您可以将代码发布到codepen.io上，以便我们可以在上下文中看到它吗？您不能将最终状态值附加到
转换
属性。这不是过渡的工作方式。我不是有意粗鲁，但你需要（再一次）看一看基本情况。是的，哈利。但这对我来说毫无意义。这就是我在这里问的原因。CSS3转换可能非常混乱。这不像你在过去的Flash时代得到了一个UI。（1）可以用纯CSS做OP想要做的事情。（2） 您应该避免发布JS/jQuery答案，除非OP表明他们对它没问题（或者对它进行了标记）。虽然我不会因为这个原因投反对票，但很可能会有其他人投反对票。（3） 即使我们不得不采取脚本编写的方式，jQuery对于这样一件小事绝对不是必需的，它的风格是一个名为“caption”的类。所以我做对了。我根本没有使用caption标签，但你说的div“caption”是；这就是为什么我认为标题是div和harry，请告诉我如何运行任何动画，当用户来到页面或页面将完全在纯CSS加载。。。如果可能的话，请告诉我，我还想学习。@RajnishRajput：看看我的答案，看看有什么方法可以做到这一点。旁注-在回复评论时使用@before username，因为没有它不会触发通知。感谢您的教育。真的帮了大忙。