Question

我希望我的叶子朝某些方向动画，同时减慢它的速度。我尝试使用缓出来实现这种效果。然而，这会导致我的叶片在向一个方向（从0％到75％）时缓和，而在向另一个方向（75％到100％）时再次缓和。

如何让我的叶子走向并且经常减速（不是每次都放松）？

#leaf {         
    height:100px;
    width:100px;

    animation: leaf 10s infinite ease-out;                                          
    -webkit-animation: leaf 10s infinite ease-out;                                  
}                                                                                   

@keyframes leaf {                                                                   
    0% {                                                                        
            transform: translate(0, 0px) rotateZ(0deg);                         
    }                                                                           
    75% {                                                                       
            transform: translate(200px, 300px) rotateZ(270deg);                 
    }                                                                           
    100% {                                                                      
            transform: translate(0px, 600px) rotateZ(360deg);                   
    }                                                                           
}                                                                                   

@-webkit-keyframes leaf {                                                           
    0% {                                                                        
            -webkit-transform: translate(0, 0px) rotateZ(0deg);                 
    }                                                                           
    75% {                                                                       
            -webkit-transform: translate(200px, 300px) rotateZ(270deg);         
    }                                                                           
    100% {                                                                      
            -webkit-transform: translate(0px, 600px) rotateZ(360deg);           
    }                                                                           
}

Answer 1

您使用的是ease-out，但您需要的是animation-timing-function: linear;

Demo

Answer 2

可以做到，但数学并不容易。我只是通过反复试验得到它。

您需要为每个步骤设置计时功能，并以某种方式根据您的需要进行调整。

演示：

div {
    position: absolute;
    left: 10px;
    top: 10px;
    height:100px;
    width:100px;
}

.leaf {         
    animation: leafa 10s infinite ease-out;                                          
    -webkit-animation: leaf 10s infinite ease-out;                                  
    animation: leaf 10s infinite ease-out;                                  
    background-color: aqua;
}                                                                                   

.mark {         
    animation: mark 10s infinite ease-out;                                          
    -webkit-animation: mark 10s infinite ease-out;                                  
    animation: mark 10s infinite ease-out;                                  
    border: solid 1px blue;
}                                                                                   


@-webkit-keyframes leaf {                                                           
    0% {    -webkit-transform: translateX(0px);   
            -webkit-animation-timing-function: cubic-bezier(0.4, 0.4, 0.45, 0.6);
    }                                                                           
    35% {   -webkit-transform: translateX(200px);         
            -webkit-animation-timing-function: cubic-bezier(0.4, 0.765, 0.6, 0.8);
    }                                                                           
    100% {  -webkit-transform: translateX(400px);           
    }                                                                           
}  

@-webkit-keyframes mark {                                                           
    0% {    -webkit-transform: translateX(0px);       }                                                                           
    100% {  -webkit-transform: translateX(400px);     }                                                                           
} 

@keyframes leaf {                                                           
    0% {    transform: translateX(0px);   
            animation-timing-function: cubic-bezier(0.4, 0.4, 0.45, 0.6);
    }                                                                           
    35% {   transform: translateX(200px);         
            animation-timing-function: cubic-bezier(0.4, 0.765, 0.6, 0.8);
    }                                                                           
    100% {  transform: translateX(400px);           
    }                                                                           
}  

@keyframes mark {                                                           
    0% {    transform: translateX(0px);       }                                                                           
    100% {  transform: translateX(400px);     }                                                                           
}

fiddle

该标记在整个转换过程中具有标准的缓动动画。叶子有2个部分，每个部分都有一个立方贝塞尔计时函数。

结果是叶子几乎与标记匹配。它可以做到你想要的一切，这只是尝试（或者我知道更多的数学）的问题。

您可以找到有用的this link。

CSS3一致的动画速度

2 个答案:

fiddle