0

这是我第一次自己编写 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;
        }
    }
4

1 回答 1

1

您需要在关键帧位置所基于的 html 标记中的某个固定点。如果一切正常position:relative，则没有基点可以对某些东西进行动画处理。假设您在这里使用 safari 工作，因为您@-webkit-keyframes fallB的设置不同于opacity:0.0您的@-moz-keyframes fallB设置。意味着在Firefox中你应该看到它class="animated fallB"不会消失。

和顶部的小费。如果您制作关键帧动画，请先尝试以一种浏览器样式对它们进行编码，然后将它们应用于其他浏览器代码。如果将太多的 css 值定义为具有相同的视觉效果，您会感到困惑，并且可能会出错。

如果你把.animated { position:absolute; ..你的 css放进去，你会看到一些成功

于 2013-04-11T07:15:59.707 回答