Question

我无法理解为什么我的代码不能正常工作。请告诉我，为什么animation-timing-function cubic-bezier无效。

<div class="testing">

</div>

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

Answer 1

将css代码放入＆＃39; style＆＃39;标记在＆＃39; head＆＃39;标签部分。以下是示例

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

Answer 2

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

在动画之前声明计时功能，它会被覆盖。

选中此fiddle - 差异是属性的顺序：）

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);

动画定时功能不起作用

2 个答案: