javascript - 如何通过jquery或css3的方法给after伪元素产生动画？

Question

<p class="ani"></p>
.ani{position:relative;width:100px;height:100px;background:red;}
.ani:before{
  content:"";
  position:absolute;
  width:100px;
  height:100px;
  background:rgba(0,0,0,.5);
  top:0;
  left:0;
}

我想给after伪元素的height 从 100px 变化到 0，产生一个很简单的动画效果？
不知道该如何去做？

Answer 1

.ani{position:relative;width:100px;height:100px;background:red; }
.ani:before{
  content:"";
  position:absolute;
  width:100px;
  height:100px;
  background:rgba(0,0,0,.5);
  top:0;
  left:0;
  transition:all 0.5s;
}
.ani:hover:before{
    height:0;
}

Answer 2

其他不变，就定义一个动画，然后调用就可以了吖

.ani:before{
  -webkit-animation: ani 3s infinite;
  animation: ani 3s infinite;
}
@-webkit-keyframes ani {
  0% {height: 100px;}
  100% {height: 0;}
}
@keyframes ani {
  0% {height: 100px;}
  100% {height: 0;}
}

Answer 3

.ani:before{
animation:change 2s;
}
@keyframes change
{
from {top:100px;}
to {top:0px;}
}
/*没有兼容性的写法，具体可以自行看animation/keyframes两个属性。*/