Css 为什么赢了'；我的不同立方贝塞尔计时是否有效

似乎有一个问题，我输入的贝塞尔数实际上对元素的旋转没有不同的影响。我将在同一时间内以不同的速度旋转所有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>

这是笔的链接：

我已经编辑了你的笔

为了创造这种效果，我使用了以下网站，它允许您创建任何您想要的立方贝塞尔：

我使用的是：

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

---

您需要更改动画持续时间

CSS

---

我明白了，我想问题是贝塞尔一词后面没有空格，对吗？当我取下那支笔时，我的笔似乎在工作谢谢，实际上我认为这是因为缺少了一个空间，我需要保持不变的持续时间实际上，只是从头到尾以不同的速度移动：）

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

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: 1000ms;
    -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: 2000ms;
    -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); }
}

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

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

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

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