Почему не будут работать мои разные таймеры с кубическим безье?

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

для создания такого эффекта я использовал следующий сайт, который алло WS создать любой кубический Безье вы хотите: http://cubic-bezier.com/

Один я использовал являются:

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

Answer 2

Вы должны изменить длительность анимационного

CSS

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