CSS3 animation-timing-function 属性

CSS 属性animation-timing-function用于定义动画的时间函数，即动画在播放过程中如何变化速度。通过设置不同的时间函数，可以让动画效果更加丰富和生动。

值

animation-timing-function属性可以接受以下几种值：

• ease：默认值，动画以慢-快-慢的方式播放。
• linear：动画以匀速播放，没有加速度或减速度。
• ease-in：动画以慢-快的方式播放。
• ease-out：动画以快-慢的方式播放。
• ease-in-out：动画以慢-快-慢的方式播放。
• cubic-bezier(n,n,n,n)：自定义时间函数，可以通过调整四个数值来定义动画的速度曲线。

示例代码

// www.javascriptcn.com code example
.element {
    animation: myAnimation 2s linear infinite;
}

@keyframes myAnimation {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(100px);
    }
    100% {
        transform: translateX(0);
    }
}

在上面的示例中，我们定义了一个动画myAnimation，它将元素在X轴上来回移动。动画的时间函数为linear，即匀速播放。元素将在2秒内完成一次完整的动画，并且将无限循环播放。

通过使用不同的时间函数，我们可以为动画赋予不同的效果，使其更加生动和吸引人。深入了解animation-timing-function属性，可以帮助我们更好地控制动画的表现形式。