从底部到最终状态的过渡 div 100px 的 CSS3 简写

Question

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

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

我相信您可以为填充和顶部设置动画。尝试了这两种方法，但都没有奏效。这里有什么？

Answer 1

最终状态值不能像下面的代码一样附加到transition 属性的值。属性的值只能是关于应该转换哪个属性、转换的持续时间、延迟和计时功能等的详细信息。

transition: padding 0.25s ease-in-out 1.0s 0 0 100px 0;
                                           ^  
                                           |_ Everything from here on in are incorrect

另外需要注意的是，transition 不是这个我们案例的正确选择。仅当元素上的属性由于某些操作而发生更改时才会发生转换（例如:hover、:focus、使用 JS 在单击时添加新类等）。没有纯 CSS 方法可以在页面加载时触发 transition。您可以使用脚本和基于超时的自动触发状态更改，但我觉得这对于可以使用 CSS 以不同方式实现的某些事情来说是不必要的复杂。

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

---

动画应该用于在页面加载时自动触发更改。与转换不同，它们是自动调用的。你可以阅读更多关于 CSS 动画的内容here。

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

• margin-top
• top（可用于具有absolute定位的元素）
• translateY()

使用 margin-top：

.caption {
  display: inline-block;
  margin-top: 100px;  /* starting position */
  animation: move-up 1s linear forwards;
            /* values are [animation-name] [animation-duration] [animation-timing-function] [animation-fill-mode] */
}
@keyframes move-up {
  to {
    margin-top: 0px;  /* final resting position */
  }
}

/* Just for demo */

.caption {
  height: 2em;
  width: 10em;
  line-height: 2em;
  background: tomato;
}

<!-- library is only to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class='caption'>This is a caption</div>

使用顶部：

.caption {
  position: absolute;
  display: inline-block;
  top: 100px; /* starting position */
  animation: move-up 1s linear forwards;
             /* values are [animation-name] [animation-duration] [animation-timing-function] [animation-fill-mode] */
}
@keyframes move-up {
  to {
    top: 0px; /* final resting position */
  }
}

/* Just for demo */

.caption {
  height: 2em;
  width: 10em;
  line-height: 2em;
  background: tomato;
}

<!-- library is only to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='caption'>This is a caption</div>

使用 translateY()：

.caption {
  display: inline-block;
  transform: translateY(100px); /* starting position */
  animation: move-up 1s linear forwards;
             /* values are [animation-name] [animation-duration] [animation-timing-function] [animation-fill-mode] */
}
@keyframes move-up {
  to {
    transform: translateY(0px); /* final resting position */
  }
}

/* Just for demo */

.caption {
  height: 2em;
  width: 10em;
  line-height: 2em;
  background: tomato;
}

<!-- library is only to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='caption'>This is a caption</div>

Answer 2

不要使用“.”因为您说您使用的是 caption div 而不是类。 并且无法检测到用户或页面已在 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>

希望对你有帮助:)