Question

似乎有一个问题，即我放入的bezier数字实际上对元素的旋转没有不同的影响。我将在相同的持续时间内以不同的速度旋转所有这四个点...甚至让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/

我使用过的是：

 $event.stopPropagation();

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

为什么我的不同立方贝塞尔时序不起作用

2 个答案: