• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • animation-timing-function

    版本:CSS3

    CSSanimation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个<timing-function>

    对于关键帧动画来说,timing function作用于一个关键帧周期而非整个动画周期,即从关键帧开始开始,到关键帧结束结束。

    定义于一个关键帧区块的缓动函数(animation timing function)应用到改关键帧;另外,若该关键帧没有定义缓动函数,则使用定义于整个动画的缓动函数。

    示例

    /* keyword values */
    animation-timing-function: ease;
    animation-timing-function: ease-in;
    animation-timing-function: ease-out;
    animation-timing-function: ease-in-out;
    animation-timing-function: linear;
    animation-timing-function: step-start;
    animation-timing-function: step-end;
    
    /* function values */
    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    animation-timing-function: steps(4, end);
    animation-timing-function: frames(10);
    
    /* multiple animations */
    animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
    
    /* global values */
    animation-timing-function: inherit;
    animation-timing-function: initial;
    animation-timing-function: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上版本的浏览器都支持animation-timing-function

    语法

    animation-timing-function:<timingfunction>

    取值

    • <timingfunction>:每个<timing-function>代表了应用于动画的timing function,定义于animation-property.
    • <timing-function>= linear |<cubic-bezier-timing-function>|<step-timing-function>
    • <cubic-bezier-timing-function>= ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>)
    • <step-timing-function>= step-start | step-end | steps(<integer>[,<step-position>]?)
    • <step-position>= jump-start | jump-end | jump-none | jump-both | start | end

    取值:

    • linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
    • ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
    • ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
    • ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
    • ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
    • step-start:等同于 steps(1, start)
    • step-end:等同于 steps(1, end)。steps(<integer>[,[ start | end ]]?):接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。
    • cubic-bezier(<number>,<number>,<number>,<number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

    说明:

    检索或设置对象动画的过渡类型

    • 如果提供多个属性值,以逗号进行分隔。
    • 对应的脚本特性为animationTimingFunction
    • 在一些场景中会有错误行为
    • 部分浏览器不支持伪元素动画,或者支持得不够好,尽可能不要利用伪元素来做动画
    默认值ease
    适用于所有元素,包含伪对象::beforeand::after
    继承性
    动画性
    计算值指定值
    媒体交互

    实例

    <style type="text/css">
    div{
    	width:100px;
    	height:100px;
    	position:relative;
    	background-color:hsl(120,65%,75%);
    	animation:demo 5s 1;
    	-webkit-animation:demo 5s 1;
    	animation-timing-function:ease-in-out;
    	-webkit-animation-timing-function:ease-in-out;
    	}
    @keyframes demo
    {
    	from{left:0px;}
    	to{left:350px;
    }
    }
    /*safari和chrome*/
    @-webkit-keyframes demo
    {
    	from{left:0px;}
    	to{left:350px;
    }
    }
    </style>
    </head>
    <body>
    	<div></div>	
    </body>

    效果图: