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

Question

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

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

我相信您可以为内边距和顶部设置动画。尝试了两种方法，但均无效。这里会是什么？

Answer 1

不要使用“.”因为你说你使用的是 caption div 而不是 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>

希望这对您有所帮助:)

Answer 2

最终状态值不能附加到 transition 属性的值，如下面的代码所示。属性的值只能是有关属性应该转换的详细信息、转换的持续时间、延迟和计时功能等

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

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

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

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

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

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

使用边距顶部：

.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>

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

CSS3 shorthand for transition div 100px from the bottom to the final state

css

position

css-transitions

css-animations