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

Can I apply animations to margins?

提问by denislexic

I'm trying to animate in CSS3 margins, which this siteseems to say you can, but I can't get working.

我正在尝试在 CSS3 边距中制作动画，这个网站似乎说你可以，但我无法开始工作。

I actually have 3 animations. 1 for a simple initial fadeInon initial load, then the 2 others for the marginanimation on click. I've also just tried margininstead of the top and bottom but still no sign of it working.

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

Click on a section to see animation toggle.

单击一个部分以查看动画切换。

$(".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>

Here is a JSFiddle: http://jsfiddle.net/ybh0thp9/3/

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

回答by Bram Vanroy

You don't need keyframes for this: http://jsfiddle.net/BramVanroy/ybh0thp9/7/

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

transition: margin 700ms;

You need to add the transition property to the base element that you wish to animate.

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

You also mentioned that you wanted opacity change, but I don't see how that's possible considering you only have a single element without children. I mean: you can't click on the element if it's hidden.

您还提到您想要更改不透明度，但考虑到您只有一个没有子项的元素，我不知道这是怎么可能的。我的意思是：如果元素被隐藏，你就不能点击它。

What you can do, though, is add opacity to the whole thing: http://jsfiddle.net/BramVanroy/ybh0thp9/9/

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

Or even prettier, with a transformation:

甚至更漂亮，经过改造：

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

---

---

Per comment, you want to fade in the elements on page load. We can do that by adding a class init.

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

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

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

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

---

---

With keyframes: 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;

回答by ErasmoOliveira

To create animations witch CSS3 you need to:

要创建动画女巫 CSS3，您需要：

1. Create a class with animation attribute; to work in some browsers you need to put prefixes: -webkit-, -o-, -moz-.
2. Create animation keyframes

1. 创建一个带有动画属性的类；要在某些浏览器中工作，您需要添加前缀：-webkit-, -o-, -moz-.
2. 创建动画关键帧

see the example:

看例子：

.animate{
    animation: myAnimation 10s; 
    animation-direction: alternate;
    animation-play-state: running;
    animation-iteration-count: infinite;
    animation-delay: 0;
    animation-timing-function: 1;
    animation-direction: alternate;

    -webkit-animation: myAnimation 10s;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    -webkit-animation-timing-function: 1;
    -webkit-animation-direction: alternate;

    -moz-animation: myAnimation 10s;
    -moz-animation-direction: alternate;
    -moz-animation-play-state: running;
    -moz-animation-iteration-count: infinite;
    -moz-animation-delay: 0;
    -moz-animation-timing-function: 1;
    -moz-animation-direction: alternate;

    -o-animation: myAnimation 10s;
    -o-animation-direction: alternate;
    -o-animation-play-state: running;
    -o-animation-iteration-count: infinite;
    -o-animation-delay: 0;
    -o-animation-timing-function: 1;
    -o-animation-direction: alternate;
}

    @keyframes myAnimation {
        0%      { margin-top: 0; margin-left: 50px}
        25%     { margin-top: 100px; margin-left: 50px }
        50%     { margin-top: 0; margin-left: 50px }
        75%     { margin-top: 100px; margin-left: 50px }
        100%    { margin-top: 0; margin-left: 50px }
    }
    @-webkit-keyframes myAnimation {
        0%      { margin-top: 0; margin-left: 100px}
        25%     { margin-top: 100px; margin-left: 100px }
        50%     { margin-top: 0; margin-left: 100px }
        75%     { margin-top: 100px; margin-left: 100px }
        100%    { margin-top: 0; margin-left: 100px }
    }
    @-moz-keyframes myAnimation {
        0%      { margin-top: 0; margin-left: 100px}
        25%     { margin-top: 100px; margin-left: 100px }
        50%     { margin-top: 0; margin-left: 100px }
        75%     { margin-top: 100px; margin-left: 100px }
        100%    { margin-top: 0; margin-left: 100px }
    }
    @-o-keyframes myAnimation {
        0%      { margin-top: 0; margin-left: 100px}
        25%     { margin-top: 100px; margin-left: 100px }
        50%     { margin-top: 0; margin-left: 100px }
        75%     { margin-top: 100px; margin-left: 100px }
        100%    { margin-top: 0; margin-left: 100px }
    }

回答by Simon_Weaver

Make sure you're not setting two transitions for different properties like this:

确保您没有为不同的属性设置两个过渡，如下所示：

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

The box-shadowwill animate but margingets completely ignored.

在box-shadow将动画，但margin被完全忽略。

This will be obvious in your browser's debugging tools because it will look like this:

这在浏览器的调试工具中很明显，因为它看起来像这样：

The correct way is:

正确的方法是：

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