Css 动画计时功能不起作用

我不明白为什么我的代码不能正常工作。请告诉我，为什么带有立方贝塞尔（cubic bezier）的

动画计时功能不起作用



.测试{
宽度：100px；
高度：30px；
背景：#000077；
位置：绝对位置；
可见性：隐藏；
不透明度：0；
左：-100px；
-webkit动画计时功能：立方贝塞尔（.78、.2、.95、.63）；
动画计时功能：立方贝塞尔（.78、.2、.95、.63）；
-webkit动画：测试5s11s；
-moz动画：测试5s11s；
-ms动画：测试5s11s；
-o-动画：测试-a 5s 1 1s；
动画：测试5s11s；
}
@-webkit关键帧测试-a{
0%{左：-100px；不透明度：1；可见性：可见；}
98%{左：100%；不透明度：1；可见性：可见；}
99%{左：100%；不透明度：0；可见性：隐藏；}
100%{左：-100px；不透明度：0；可见性：隐藏；}
}
@关键帧测试-a{
0%{左：-100px；不透明度：1；可见性：可见；}
98%{左：100%；不透明度：1；可见性：可见；}
99%{左：100%；不透明度：0；可见性：隐藏；}
100%{左：-100px；不透明度：0；可见性：隐藏；}
}
将css代码放在“head”标记部分的“style”标记中。下面是一个例子

 <style type="text/css">
    .testing {
        width: 100px;
        height: 30px;
        background: #000077;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        left: -100px;
    -webkit-animation-timing-function: cubic-bezier(.78,.2,.95,.63);
        animation-timing-function: cubic-bezier(.78,.2,.95,.63);
        -webkit-animation: testing-a 5s 1 1s;
        -moz-animation: testing-a 5s 1 1s;
        -ms-animation: testing-a 5s 1 1s;
        -o-animation: testing-a 5s 1 1s;
        animation: testing-a 5s 1 1s;
    }
    @-webkit-keyframes testing-a {
        0% { left:-100px; opacity: 1; visibility:visible;}
        98% { left:100%; opacity: 1; visibility:visible;}
        99% { left:100%; opacity: 0; visibility:hidden;}
        100% { left:-100px; opacity: 0; visibility:hidden;}
    }
    @keyframes testing-a {
        0% { left:-100px; opacity: 1; visibility:visible;}
        98% { left:100%; opacity: 1; visibility:visible;}
        99% { left:100%; opacity: 0; visibility:hidden;}
        100% { left:-100px; opacity: 0; visibility:hidden;}
    }
</style>


.测试{
宽度：100px；
高度：30px；
背景：#000077；
位置：绝对位置；
可见性：隐藏；
不透明度：0；
左：-100px；
-webkit动画计时功能：立方贝塞尔（.78、.2、.95、.63）；
动画计时功能：立方贝塞尔（.78、.2、.95、.63）；
-webkit动画：测试5s11s；
-moz动画：测试5s11s；
-ms动画：测试5s11s；
-o-动画：测试-a 5s 1 1s；
动画：测试5s11s；
}
@-webkit关键帧测试-a{
0%{左：-100px；不透明度：1；可见性：可见；}
98%{左：100%；不透明度：1；可见性：可见；}
99%{左：100%；不透明度：0；可见性：隐藏；}
100%{左：-100px；不透明度：0；可见性：隐藏；}
}
@关键帧测试-a{
0%{左：-100px；不透明度：1；可见性：可见；}
98%{左：100%；不透明度：1；可见性：可见；}
99%{左：100%；不透明度：0；可见性：隐藏；}
100%{左：-100px；不透明度：0；可见性：隐藏；}
}
将css代码放在“head”标记部分的“style”标记中。下面是一个例子

 <style type="text/css">
    .testing {
        width: 100px;
        height: 30px;
        background: #000077;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        left: -100px;
    -webkit-animation-timing-function: cubic-bezier(.78,.2,.95,.63);
        animation-timing-function: cubic-bezier(.78,.2,.95,.63);
        -webkit-animation: testing-a 5s 1 1s;
        -moz-animation: testing-a 5s 1 1s;
        -ms-animation: testing-a 5s 1 1s;
        -o-animation: testing-a 5s 1 1s;
        animation: testing-a 5s 1 1s;
    }
    @-webkit-keyframes testing-a {
        0% { left:-100px; opacity: 1; visibility:visible;}
        98% { left:100%; opacity: 1; visibility:visible;}
        99% { left:100%; opacity: 0; visibility:hidden;}
        100% { left:-100px; opacity: 0; visibility:hidden;}
    }
    @keyframes testing-a {
        0% { left:-100px; opacity: 1; visibility:visible;}
        98% { left:100%; opacity: 1; visibility:visible;}
        99% { left:100%; opacity: 0; visibility:hidden;}
        100% { left:-100px; opacity: 0; visibility:hidden;}
    }
</style>


.测试{
宽度：100px；
高度：30px；
背景：#000077；
位置：绝对位置；
可见性：隐藏；
不透明度：0；
左：-100px；
-webkit动画计时功能：立方贝塞尔（.78、.2、.95、.63）；
动画计时功能：立方贝塞尔（.78、.2、.95、.63）；
-webkit动画：测试5s11s；
-moz动画：测试5s11s；
-ms动画：测试5s11s；
-o-动画：测试-a 5s 1 1s；
动画：测试5s11s；
}
@-webkit关键帧测试-a{
0%{左：-100px；不透明度：1；可见性：可见；}
98%{左：100%；不透明度：1；可见性：可见；}
99%{左：100%；不透明度：0；可见性：隐藏；}
100%{左：-100px；不透明度：0；可见性：隐藏；}
}
@关键帧测试-a{
0%{左：-100px；不透明度：1；可见性：可见；}
98%{左：100%；不透明度：1；可见性：可见；}
99%{左：100%；不透明度：0；可见性：隐藏；}
100%{左：-100px；不透明度：0；可见性：隐藏；}
}
您的问题在于CSS的层次结构

在动画之前声明计时函数，它将被覆盖

选中此项-区别在于属性的顺序：）

您的问题在于CSS的层次结构

在动画之前声明计时函数，它将被覆盖

选中此项-区别在于属性的顺序：）

js小提琴似乎工作得很好。有什么问题吗？没有。还是我弄错了？因为如果你删除了动画计时，动画将是精确的，同样的，开始应该是缓慢的，最后是加速的，但这并不感谢你澄清这一点！我知道你的问题是什么-请阅读我的答案：）js小提琴似乎工作得很好。有什么问题吗？没有。还是我弄错了？因为如果你删除了动画计时，动画将是精确的，同样的，开始应该是缓慢的，最后是加速的，但这并不感谢你澄清这一点！我知道你的问题是什么-请阅读我的答案：）先看看JSFIDLE，plz。先看看JSFIDLE，plz。哦，天哪！谢谢！：）哦，天哪！谢谢！：）
animation: testing-a 5s 1 1s;
-webkit-animation-timing-function: cubic-bezier(.78,.2,.95,.63);
animation-timing-function: cubic-bezier(.78,.2,.95,.63);