Question

尝试在CSS3边距中制作动画。哪个this site似乎可以说你可以，但它并不适合我。

这是一个jsFiddle：http://jsfiddle.net/ybh0thp9/3/（单击某个部分可查看动画切换）。

这是我的CSS：

.section{
    display: block;
    animation: fadeIn .5s ease, margin-top .5s ease, margin-bottom .5s ease;
}
.section.open {
          margin: 20px 0;
}

我实际上有3个动画。 1表示初始加载时的简单初始fadeIn，然后单击其他2个margin动画。我还试过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

要创建CSS3动画，您需要：

1 - 使用动画属性创建一个类，以便在需要添加前缀的某些浏览器中工作：-webkit-， - o - ， - moz-。 2 - 创建动画关键帧

参见示例：

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

Answer 3

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

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

box-shadow会动画，但是margin会被完全忽略。

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

正确的方法是：

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

CSS3动画边距

3 个答案: