Html CSS3滚动动画不'；行不通

我制作了一个向下滚动的动画按钮，但动画不起作用。 我不知道怎么了。我已经用

-webkit animation:sdb10 2s infinite

和

animation:sdb10 2s infinite

尝试过了，但看起来没有效果

。向下滚动span{
位置：绝对位置；
排名：0；
宽度：30px；
高度：50px；
边框：2个实心#1F；
边界半径：50px；
框大小：边框框；
}
.向下滚动{
位置：固定；
宽度：30px；
高度：75px；
底部：-25px；
左：50%；
z指数：2；
显示：内联块；
-webkit转换：翻译（0，-50%）；
转换：翻译（0，-50%）；
字母间距：.1米；
文字装饰：无；
过渡：不透明度；
}
.scrolldown span:：before{
位置：绝对位置；
顶部：10px；
左：50%；
内容：''；
宽度：6px；
高度：6px；
左边距：-3px；
背景色：#1F；
边界半径：100%；
-webkit动画：sdb10 2s无限；
动画：sdb10 2s无限；
框大小：边框框；
}
.scrolldown span:：之后{
位置：绝对位置；
底部：-20px；
左：50%；
宽度：18px；
高度：18px；
内容：''；
左边距：-9px；
左边框：2倍实心#1F；
边框底部：2个实心#1F；
-webkit变换：旋转（-45度）；
变换：旋转（-45度）；
-webkit动画：sdb05 1.5s无限；
动画：sdb05 1.5s无限；
框大小：边框框；
}

正文{
宽度：100%；
身高：100%；
}
html{
宽度：100%；
身高：100%；
}
@介质（最小宽度：767px）{
navbar先生{
填充：20px0；
-webkit过渡：背景。5s缓进缓出，填充。5s缓进缓出；
-moz过渡：背景。5s缓进缓出，填充。5s缓进缓出；
过渡：背景。5s缓进缓出，填充。5s缓进缓出；
}
.顶部导航崩溃{
填充：0；
}
}
.导言部分{
身高：100%；
填充顶部：150px；
文本对齐：居中；
背景：#fff；
}
.关于部分{
身高：100%；
填充顶部：150px；
文本对齐：居中；
背景：#eee；
}
.服务科{
身高：100%；
填充顶部：150px；
文本对齐：居中；
背景：#fff；
}
.联络组{
身高：100%；
填充顶部：150px；
文本对齐：居中；
背景：#eee；
}

泡泡学










关于部分
服务科
联系方式
手机号码：

您忘记包含css3动画本身：

@-webkit-keyframes sdb10 {
    0% {
        -webkit-transform: translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        -webkit-transform: translate(0, 20px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes sdb10 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        transform: translate(0, 20px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

---

请更新您的问题，以包括

动画的
关键帧
@Shaggy关键帧是什么意思？您需要仔细阅读。@Shaggy这就是重点！明白了，谢谢我想这是你想要的；DDyou说滚动不起作用，我发布的只是滚动的效果，我只是增加了时间而已