Why won't my different cubic-bezier timings work - css

Question

Seem to be having a problem where the bezier numbers I put in are not actually having different effects on the rotation of an element. I will be rotating all 4 of these dots at different speeds over the same duration...stuck at even getting 2 to behave differently:
<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>
Styled like this:
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); }
}
Here is a link to the pen: http://codepen.io/chris86/pen/jWqGvM?editors=110

Answer 1

I've edited your pen http://codepen.io/anon/pen/BjKmxR?editors=110
In order to create that effect I've used the following site that allows you to create whatever cubic-bezier you want:http://cubic-bezier.com/
The one I've used are:
cubic-bezier(.2,.78,.69,.86);
cubic-bezier(.95,.1,1,.85);

Answer 2

You need to change the animation duration
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); }
}