Как использовать animate.css в css3

Question

Как использовать animate.css в css3

Кто-нибудь может мне помочь? Я не знаю, как использовать animate.css.

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

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

0

css3 animate.css

Источник

user4407790 09 янв '15 в 08:41

1 ответ

Другие вопросы по тегам css3 animate.css

user4430490 09 янв '15 в 08:56 2015-01-09 08:56 · Answer 1 · 2015-01-09 08:56

Я не думаю, что у CSS есть свойство "slideDown". Но вы можете сделать что-то подобное с помощью CSS trnasition http://jsbin.com/hiboyoxoha/1/edit

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

<!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>