Question

页面加载时是否可以动作css动画？我现在正在使用css动画进行探索，因为我从未真正使用它们。

到目前为止，我创建了这个：https://jsfiddle.net/7prg793g但是它目前仅通过将鼠标悬停在其上。

* {
  margin: 0;
  padding: 0;
}

.reveal {
  width: 380px;
  height: 660px;
  margin: 50px;
  float: left;
}

.open {
  background: url(http://uploadir.com/u/9btuxs9t) 0px 330px, url(http://uploadir.com/u/9btuxs9t) 0px -405px, #42413C;
  background-repeat: no-repeat;
  -webkit-transition: background-position 0.3s ease;
  -moz-transition: background-position 0.3s ease;
  -o-transition: background-position 0.3s ease;
  -ms-transition: background-position 0.3s ease;
  transition: background-position 0.3s ease;
}

.open:hover {
  background: url(http://uploadir.com/u/9btuxs9t) 0px 660px, url(http://uploadir.com/u/9btuxs9t) 0px -735px, #42413C;
  background-repeat: no-repeat;
}

.reveal p {
  font: 45px/300px Helvetica, Arial, sans-serif;
  text-align: center;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.reveal:hover p {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  cursor: pointer;
}

如果这是可能的，那么我的下一个问题是可以延迟动画直到div实际可见？我会事先使用预装载器。

谢谢。

Answer 1

纯CSS解决方案（关键帧）

此解决方案没问题，但这取决于您对浏览器的兼容性：

@keyframes opening {
    0% {
          background: url(http://uploadir.com/u/9btuxs9t) 0px 330px, url(http://uploadir.com/u/9btuxs9t) 0px -405px, #42413C;
    }
    100% {
       background: url(http://uploadir.com/u/9btuxs9t) 0px 660px, url(http://uploadir.com/u/9btuxs9t) 0px -735px, #42413C;
    }
}

@keyframes opening-p {
    0% {
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;    
    }
    100% {
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      opacity: 1;
    }
}

我创建了两个关键帧，用作带div和文本的动画。以这种方式附加动画后（使用animation-fill-mode：forward;）

.open {
    background: url(http://uploadir.com/u/9btuxs9t) 0px 330px, url(http://uploadir.com/u/9btuxs9t) 0px -405px, #42413C;
  background:no-repeat;
  -webkit-transition: background-position 0.3s ease;
  -moz-transition: background-position 0.3s ease;
  -o-transition: background-position 0.3s ease;
  -ms-transition: background-position 0.3s ease;
  transition: background-position 0.3s ease;
  animation-name: opening;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.reveal p {
  font: 45px/300px Helvetica, Arial, sans-serif;
  text-align: center;
  cursor:pointer;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;

  animation-name: opening-p;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

这里的小提琴：http://jsfiddle.net/8anvmpfv/

jQuery解决方案

所以使用jquery很容易：

  $('.reveal').ready(function() {
      $('.reveal').addClass('opened revealed');
  });

它等待div准备就绪，jquery给div提供了用css做动画的正确类。这里是小提琴：https://jsfiddle.net/k6faf0fu/

Answer 2

JavaScript在pageload上添加css动画：

$(document).ready(function() {
    $("yourHtmlTag").addClass("open:hover");
});

有关可见度，请查看jQuery API。

Answer 3

你可以用纯粹的css来做这件事我相信（通过设置动画延迟和做一些数学来计算所有内容），但我认为你最好的选择也是使用一些javascript。

Here's a fiddle of a very basic (and ugly) loading animation screen.

您可以使用body'已锁定'和某种叠加层启动该页面，以防止用户与该网站进行互动。然后，您会听取各种元素的transitionend，以了解何时触发其他transitions。

您可以使用css动画执行相同的操作，只需使用animationend。

Answer 4

你可以把它作为页面上的最后一件事。这将导致它只在其余资产加载后发生。不包括图像。

在页面加载时动画css

4 个答案:

纯CSS解决方案（关键帧）

jQuery解决方案