Я пытаюсь анимировать поля CSS3, что, по-видимому, говорит этот сайт, но я не могу работать.
У меня на самом деле есть 3 анимации. 1 для простого начального fadeIn
при начальной загрузке, затем 2 других для анимации margin
при щелчке. Я также только что попробовал margin
вместо верха и низа, но все еще не было никаких признаков того, что это работает.
Нажмите на раздел, чтобы увидеть анимацию переключения.
$(".section").click(function() {
$(this).toggleClass("open");
});
body{
background: #f1f1f1;
}
.section{
display: block;
background: #fff;
border-bottom: 1px solid #f1f1f1;
animation: fadeIn .5s ease, margin-top .5s ease, margin-bottom .5s ease;
}
.section.open {
margin: 20px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
<div class="section">Some content</div>
<div class="section">Some content</div>
<div class="section">Some content</div>
<div class="section">Some content</div>
<div class="section">Some content</div>
<div class="section">Some content</div>
<div class="section">Some content</div>
</div>