我可以将动画应用到边距吗？

我正在尝试在 CSS3 边距中制作动画，这这个网站 http://css3.bradshawenterprises.com/transitions/似乎说你可以，但我无法工作。

我实际上有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>

这是一个 JSFiddle：http://jsfiddle.net/ybh0thp9/3/ http://jsfiddle.net/ybh0thp9/3/

为此，您不需要关键帧：http://jsfiddle.net/BramVanroy/ybh0thp9/7/ http://jsfiddle.net/BramVanroy/ybh0thp9/7/

transition: margin 700ms;

您需要将过渡属性添加到要设置动画的基本元素。

您还提到您想要更改不透明度，但考虑到您只有一个没有子元素的元素，我不明白这怎么可能。我的意思是：如果该元素是隐藏的，则您无法单击该元素。

不过，您可以做的是为整个事物添加不透明度：http://jsfiddle.net/BramVanroy/ybh0thp9/9/ http://jsfiddle.net/BramVanroy/ybh0thp9/9/

或者通过改造变得更漂亮：

http://jsfiddle.net/BramVanroy/ybh0thp9/10/ http://jsfiddle.net/BramVanroy/ybh0thp9/10/

.section {
    margin: 0;
    opacity: 0.7;
    transform: scale(0.85);
    transition: all 700ms;
}
.section.open {
    margin: 20px 0;
    opacity: 1;
    transform: scale(1);
}

根据评论，您希望在页面加载时淡入元素。我们可以通过添加一个类来做到这一点init.

http://jsfiddle.net/BramVanroy/ybh0thp9/12/ http://jsfiddle.net/BramVanroy/ybh0thp9/12/

$(".section").addClass("init"); // JS
.section.init {opacity: 1;} // CSS

使用关键帧：http://jsfiddle.net/BramVanroy/ybh0thp9/14/ http://jsfiddle.net/BramVanroy/ybh0thp9/14/

@-webkit-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }

-webkit-animation: fadeIn 1.5s ease;    
-moz-animation: fadeIn 1.5s ease;
animation: fadeIn 1.5s ease;