我能否将动画应用于边距？

Question

我能否将动画应用于边距？

36

我正在尝试使用CSS3动画来实现外边距的动画效果，这个网站上似乎说可以实现，但是我无法实现。

实际上我有三个动画效果，一个是在初始加载时进行简单的fadeIn，然后另外两个是点击时进行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/

- denislexic

如果您希望我们调试它们，您需要展示所有关键帧动画，但是您是否可以使用转换来完成这个过程 - http://jsfiddle.net/ybh0thp9/5/ - Paulie_D

2

你似乎混淆了动画和过渡，并且似乎试图在某人点击看不见的东西后将某物从不可见状态淡入。 - Quentin

哦，确实是这样。我混淆了动画和过渡！ - denislexic

3个回答

9

如果转换仍然不起作用，请使用以下提示...

请确保不要为不同属性设置两个单独的过渡效果，例如：

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

很明显，当查看浏览器的调试工具时，正在发生什么事情是显而易见的：

使用

链接可显示效果。

由于常规CSS规则处理，margin不被考虑，在此情况下，box-shadow将按预期进行动画处理。

正确的方法是组合规则。

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

- Simon_Weaver

这并没有真正解决OP的问题，因为他们的代码中没有使用任何transition属性。 - TylerH

说得好，但有点讽刺的是被采纳的答案告诉OP要切换转换方式，最终成为了被采纳的答案;-) - Simon_Weaver

说实话，被采纳的答案说“你不需要动画，只需使用过渡”，然后展示了如何使用过渡来实现效果。（然后进一步详细说明如何满足OP的附加要求）这个答案假定从一开始就使用过渡，并没有参考OP的代码。它可能更值得作为对被采纳答案的评论，或者重写以展示如何通过过渡来实现OP想要的效果，并额外警告不要用一个声明覆盖另一个声明。 - TylerH

我的注意力直接被标题所吸引，看到了答案。说实话，在你提到实际原始问题没有提到转换之前，我并没有注意到这一点。有时候我的回答只是我认为可能会帮助未来遇到同样愚蠢错误的人的有用信息。有时候我会被踩。有时候不会。有时候我会感到冒犯，有时候不会。 - Simon_Weaver

-1

使用CSS3创建动画需要以下步骤：

创建一个带有动画属性的类；为了在某些浏览器中正常工作，您需要添加前缀：-webkit-、-o-、-moz-。
创建动画关键帧

请参考以下示例：

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

- ErasmoOliveira

3

未添加前缀的规则应始终放在最后。 W3C规范应该覆盖浏览器特定的规则。 - Bram Vanroy

@BramVanroy 真的吗？！我不知道啊 :O - ErasmoOliveira

1

这已经过时了。前缀不再需要。 - Ollie Williams

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bram Vanroy · Accepted Answer

你不需要使用关键帧来实现这个效果：http://jsfiddle.net/BramVanroy/ybh0thp9/7/

transition: margin 700ms;

您需要将过渡属性添加到希望进行动画处理的基本元素中。

您还提到想要更改不透明度，但是考虑到您只有一个没有子元素的单个元素，我不知道如何做到这一点。我的意思是：如果元素被隐藏，您无法单击该元素。

不过，您可以为整个元素添加不透明度：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;