CSS 过渡效果加载，而不是悬停建议

Question

我一直在玩css过渡效果。一切都在工作，但尝试了除:hover以外的不同属性。

我正在寻找转换div onload 的东西，例如，如果我在页面上并且向下滚动，一旦我到达某个div，那么过渡属性就会适用。

这是我一直在玩的片段，以便在将鼠标悬停在元素上时开始过渡，寻找类似的东西，但不悬停即可自动加载：

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 760px;
    height: 760px;
    background-image: url("1.png");
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
    padding-bottom:20px;
}
.box:hover {
    background-image: url("1.png");
    width: 760px;
    height: 760px;
    -webkit-transform: rotate(180deg);
    transform: rotate(-2deg);
    padding-bottom:20px;
}

Answer 1

您需要使用一点 Javascript 将具有适当过渡属性的某个类附加到.box容器中，以便在加载时应用过渡。

请注意，需要应用setTimeout来追加类，以便过渡可见，否则属性将覆盖。

请参阅以下演示：

setTimeout(function() {
  document.getElementsByClassName("box")[0].classList.add("transitionBox");
}, 100);

.box {
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 760px;
  height: 760px;
  background-image: url("1.png");
  -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
  transition: width 2s, height 2s, background-color 2s, transform 2s;
  padding-bottom: 20px;
}
.transitionBox {
  background-image: url("1.png");
  width: 760px;
  height: 760px;
  -webkit-transform: rotate(180deg);
  transform: rotate(-2deg);
  padding-bottom: 20px;
}

<div class="box"></div>

Answer 2

你可以通过向该div添加一个类来自动制作annimation css，所以无论它是:hover还是有一个类annimation它都会触发：(使用setTimeout定义开始结束动画的时间(

下面是一个工作片段：

$(function() {
  setTimeout(function() {
    $(".box").addClass("annimation");
  }, 500)
  setTimeout(function() {
    $(".box").removeClass("annimation");
  }, 3000)
})

.box {
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 360px;
  height: 360px;
  background-image: url("http://www.wallpaperstop.com/wallpapers/flower-wallpapers/flower-imag-336x210-0111.jpg");
  -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
  transition: width 2s, height 2s, background-color 2s, transform 2s;
  padding-bottom: 20px;
}
.box.annimation,
.box:hover {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  padding-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>