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

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

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

источник

2015-01-09 Jess

Глядя [источник animate.css] (https://github.com/daneden/animate.css/ blob/master/animate.css), я вижу, что функция 'slideDown' отсутствует. Однако есть «slideInDown», и если вы используете эту функцию, анимация будет * работать *. – Vucko

Лучше вы перейдете через https://github.com/daneden/animate.css/blob/master/README.md, или вы можете использовать стили css3, добавив еще одну таблицу стилей. Удостоверьтесь, что имя класса/id не совпадает с именем animate.css – rajmathan

Как это получило upvote? Он буквально говорит «как использовать animate.css»? Пожалуйста, уточните, что вы ищете **, что вы ищете **, * то, что вы пробовали *, а также ** любую дополнительную информацию **, которую вы можете предоставить. – jbutler483

Я не думаю, что CSS есть свойство "slideDown". Но вы можете сделать Somthing как это с 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>

источник

2015-01-09 08:56:48 satis

ответ

Смежные вопросы