CSS3动画边距

Question

尝试在CSS3边距中制作动画.这本网站似乎是说你可以,但它不是为我工作.

这是一个jsFiddle:http://jsfiddle.net/ybh0thp9/3/(点击一个部分查看动画切换).

这是我的CSS:

$(".section").click(function() {
    $(this).toggleClass("open");
});

我实际上有3个动画.1表示fadeIn初始加载时的简单初始化,然后margin单击其他2个表示动画.我也试过margin而不是顶部和底部,但仍然没有工作的迹象.

Answer 1

你不需要关键帧:http://jsfiddle.net/BramVanroy/ybh0thp9/7/

transition: margin 700ms;

您需要将transition属性添加到要设置动画的基本元素.

你还提到过你想要不透明度的变化,但是我不知道如果只有一个没有子元素的元素,那是多么可能.我的意思是:如果元素被隐藏,你就无法点击它.

但是,你可以做的是为整个事情添加不透明度:http://jsfiddle.net/BramVanroy/ybh0thp9/9/

甚至更漂亮,转型:

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/

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

关键帧: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;

Answer 2

如果仍然不起作用，请使用过渡的提示...

确保您没有为不同的属性设置两个单独的转换，如下所示：

transition: margin 1000ms ease-in-out;
transition: box-shadow 1000ms ease-in-out;

查看浏览器的调试工具时，很明显发生了什么：

将会box-shadow按预期进行动画处理，但margin由于正常的 css 规则处理而不会被考虑。

正确的做法是结合规则：

transition: margin 1000ms ease-in-out, box-shadow 1000ms ease-in-out;