Question

这是我第一次自己编写CSS3动画，我刚刚打开页面而没有运行。

唯一的效果是应用了动画fallB的内容，它会消失，但处于相同的位置。

动画应用于的其他元素没有任何反应。

我做错了什么？

这是我的代码：

.animated{
        -moz-transform: translate(0,0);
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
        -moz-transform3d: translate(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    .animated.fallA{
        -moz-animation: fallA 1s forwards ease-in-out;
        -webkit-animation: fallA 1s forwards ease-in-out;
        animation: fallA 1s forwards ease-in-out;
    }
    .animated.fallB{
        -moz-animation: fallB 1s forwards ease-in-out;
        -webkit-animation: fallB 1s forwards ease-in-out;
        animation: fallB 1s forwards ease-in-out;
    }
    .animated.fallC{
        -moz-animation: fallC 1s forwards ease-in-out;
        -webkit-animation: fallC 1s forwards ease-in-out;
        animation: fallC 1s fowards ease-in-out;
    }
    .animated.fallD{
        -moz-animation: fallD 1s forwards ease-in-out;
        -webkit-animation: fallD 1s forwards ease-in-out;
        animation: fallD 1s forwards ease-in-out;
    }
    .animated.fallE{
        -moz-animation: fallE 1s forwards ease-in-out;
        -webkit-animation: fallE 1s forwards ease-in-out;
        animation: fallE 1s forwards ease-in-out;
    }
    @-moz-keyframes fallA{
        0%{
            position:relative;
            opacity:0.0;
            top:-300px;
            left:-400px;
        }
        100%{
            opacity:1.0;
            top:0;
            left:0;
        }
    }
    @-webkit-keyframes fallA{
        0%{
            position:relative;
            opacity:0.0;
            top:-300px;
            left:-400px;
        }
        100%{
            opacity:1.0;
            top:-300px;
            left:-400px;
        }
    }
    @keyframes fallA{
        0%{
            position:relative;
            opacity:0.0;
            top:-300px;
            left:-400px;
        }
        100%{
            opacity:1.0;
            top:-300px;
            left:-400px;
        }
    }
    @-moz-keyframes fallB{
        0%{
            position:relative;
            opacity:0.0;
            top:-200px;
            left:-200px;
        }
        100%{
            opacity:1.0;
            top:0;
            left:0;
        }
    }
    @-webkit-keyframes fallB{
        0%{
            position:relative;
            opacity:0.0;
            top:-200px;
            left:-200px;
        }
        100%{
            opacity:0.0;
            top:0;
            left:0;
        }
    }
    @keyframes fallB{
        0%{
            position:relative;
            opacity:0.0;
            top:-200px;
            left:-200px;
        }
        100%{
            opacity:1.0;
            top:0;
            left:0;
        }
    }
    @-moz-keyframes fallC{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        100%{
            opacity:1.0;
            top:0;
        }
    }
    @-webkit-keyframes fallC{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        100%{
            opacity:1.0;
            top:0;
        }
    }
    @keyframes fallC{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        100%{
            opacity:1.0;
            top:0;
        }
    }
    @-moz-keyframes fallD{
        0%{
            position:relative;
            opacity:0.0;
            top:-200px;
            right:-200px;
        }
        100%{
            opacity:1.0;
            top:-200px;
            right:-200px;
        }
    }
    @-webkit-keyframes fallD{
        0%{
            position:relative;
            opacity:0.0;
            top:-200px;
            right:-200px;
        }
        100%{
            opacity:1.0;
            top:-200px;
            right:-200px;
        }
    }
    @keyframes fallD{
        0%{
            position:relative;
            opacity:0.0;
            top:-200px;
            right:-200px;
        }
        100%{
            opacity:1.0;
            top:0;
            right:0;
        }           
    }
    @-moz-keyframes fallE{
        0%{
            position:relative;
            opacity:0.0;
            top:-300px;
            right:-400px;
        }
        100%{
            opacity:1.0;
            top:0;
            right:0;
        }
    }
    @-webkit-keyframes fallE{
        0%{
            position:relative;
            opacity:0.0;
            top:-300px;
            right:-400px;
        }
        100%{
            opacity:1.0;
            top:0;
            right:0;
        }
    }
    @keyframes fallE{
        0%{
            position:relative;
            opacity:0.0;
            top:-300px;
            right:-400px;
        }
        100%{
            opacity:1.0;
            top:0;
            right:0;
        }
    }

Answer 1

你需要在html标记的某个位置使用关键帧位置所基于的固定点。如果一切都是position:relative，则没有基点可以动画来自/来自。假设您在这里使用safari，因为@-webkit-keyframes fallB已opacity:0.0，而您的@-moz-keyframes fallB设置则为class="animated fallB"。意味着在Firefox中你应该看到.animated { position:absolute; ..没有消失。

并在顶部提示。如果您制作关键帧动画，请先尝试在一个browsertyle中对它们进行编码，然后将它们应用到其他浏览器代码中。如果将css值定义为具有相同的视觉效果，您可能会感到困惑并且可能会出错。

如果将{{1}}放入css

，您会看到一些成功

为什么这个CSS3动画不运行？

1 个答案: