小编WeB*_*WeB的帖子

在滚动到页面上的特定位置后,我花了一整天时间寻找一种简单的方法来启动动画.

我的css

.animation {
 width: 50%; 
 float: left; 
 position: relative; 
 -webkit-animation-name: test; 
 -webkit-animation-duration: 4s; 
 -webkit-animation-iteration-count: 3;
 -webkit-animation-fill-mode: forwards; 
 animation-name: test; 
 animation-duration: 4s; 
 animation-iteration-count: 1; 
 animation-fill-mode: forwards; }

还有我的HTML

<div class="container">

<div class="animation">

Content goes here...

</div>

</div>

我想知道当我滚动到类容器时如何使动画开始.

我试图在纯css3中创建一个带过渡和盒子阴影的贴纸.到目前为止,我已经完成了两面都有阴影的纸张,但我想让它看起来像这样:

没有图像,这甚至可能吗？

.shadow {
  width: 150px;
  height: 150px;
  background-color: yellow;
  position: relative;
}
.shadow:after {
  position: absolute;
  right: 10px;
  left: auto;
  -webkit-transform: skew(8deg) rotate(3deg);
  -moz-transform: skew(8deg) rotate(3deg);
  -ms-transform: skew(8deg) rotate(3deg);
  -o-transform: skew(8deg) rotate(3deg);
  transform: skew(8deg) rotate(3deg);
}

<div class="shadow">
  edit this even further
</div>