Question

尝试进行过渡效果，当用户首次进入页面时，div'标题'开始比其最终静止位置低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>

使用top：

.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

不要使用“。”因为你说你使用的是标题 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>

希望这会对你有所帮助:)。

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

2 个答案: