css - 为什么我的不同立方贝塞尔曲线计时不起作用

Question

似乎有一个问题，我输入的贝塞尔数字实际上对元素的旋转没有不同的影响。我将在相同的持续时间内以不同的速度旋转所有 4 个点...甚至让 2 个点的行为不同:

<div id="dotcontainer1" class="dotcont">
    <div id="dot1" class="dot"></div>
</div>

<div id="dotcontainer2" class="dotcont">
    <div id="dot2" class="dot"></div>
</div>

<div id="dotcontainer3" class="dotcont">
    <div id="dot3" class="dot"></div>
</div>

<div id="dotcontainer4" class="dotcont">
    <div id="dot4" class="dot"></div>
</div>

样式如下:

body {
    background-color: #414a5b;
}

.dotcont {
    width: 200px;
    height: 200px;
    float: left;
}

.dot {
    position: relative;
    margin: 0 auto;
}

#dot1 {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: #fff;
}

#dot2 {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: #fff;
    opacity: 0.75;
}

#dot3 {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: #fff;
    opacity: 0.5;
}

#dot4 {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: #fff;
    opacity: 0.25;
}

#dotcontainer1 {
    -webkit-animation-name: spin1;
    -webkit-animation-duration: 3000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier (0,0,0.58,1);   
}   

@-webkit-keyframes spin1 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

#dotcontainer2 {
    -webkit-animation-name: spin2;
    -webkit-animation-duration: 3000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier (.42,0,1,1);    
}   

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

这是笔的链接:http://codepen.io/chris86/pen/jWqGvM?editors=110

Answer 1

我编辑了你的笔http://codepen.io/anon/pen/BjKmxR?editors=110

为了创建这种效果，我使用了以下网站，您可以创建任何您想要的立方贝塞尔曲线:http://cubic-bezier.com/

我用过的是:

cubic-bezier(.2,.78,.69,.86);
cubic-bezier(.95,.1,1,.85);