html - 在页面加载时动画 css

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:forwards;)

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

这里是 fiddle :http://jsfiddle.net/8anvmpfv/

jQuery 解决方案

所以用jquery很容易做到:

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

它等待 div 准备就绪，jquery 为 div 提供使用 css 执行动画的正确类。 这是 fiddle :https://jsfiddle.net/k6faf0fu/