Question

有人能帮帮我吗？我不知道如何使用animate.css。

＆＃13;

.original,
.box {
  border-radius: 6px;
}
.original {
  background: #eaeaed;
  border: 1px dashed #cecfd5;
  float: left;
  margin: 12px 15px;
}
.box {
  background: #2db34a;
  height: 95px;
  line-height: 95px;
  text-align: center;
  width: 95px;
}
.spin {
  cursor: pointer;
  transform-style: preserve-3d;
}
.spin:hover {
  animation-name: slideDown;
  -webkit-animation-name: slideDown;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}

＆＃13;

<div class="original">
  <div class="spin">
    <div class="box box-1">Box 1</div>
  </div>
</div>

＆＃13;

Answer 1

我不认为CSS有属性＆＃34; slideDown＆＃34;。但你可以使用CSS trnasition制作这样的东西 http://jsbin.com/hiboyoxoha/1/edit

＆＃13;

    .wrapper {
      width: 200px;
      height: 100px;
      background: #44f;
      text-align: center;
      color: #fff;
      line-height: 100px;
      font: 25px arial;
      overflow: hidden;
      position: relative;
    }
    .inner {
      position: absolute;
      height: 100px;
      top: -100px;
      transition: all 0.5s;
      background: #444;
    }
    .wrapper:hover .inner {
      top: 0px;
    }

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <div class="wrapper">hover me
    <div class="inner">Hello i am new div</div>
  </div>
</body>

</html>

＆＃13;

如何在css3中使用animate.css

1 个答案: