CSS animation-timing-function 属性设置动画播放速度-网站技术-云服务器技术网

首页网站技术正文

CSS animation-timing-function 属性设置动画播放速度

2022-05-30 625

CSS animation-timing-function 属性

实例

CSS animation-timing-function 属性设置动画播放速度

从开头到结尾以相同的速度来播放动画：

div
{
animation-timing-function:2s;
-webkit-animation-timing-function:2s; /* Safari 和 Chrome */
}

定义和用法

animation-timing-function 规定动画的速度曲线。

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

速度曲线用于使变化更为平滑。

默认值：	ease
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.animationTimingFunction="linear"

语法

animation-timing-function: value;

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-play-state 属性。

原文链接：https://77isp.com/post/1029.html

=========================================

https://77isp.com/ 为 “云服务器技术网” 唯一官方服务平台，请勿相信其他任何渠道。