设置动画播放方式

来源:互联网 发布:虚拟蓝牙适配器软件 编辑:程序博客网 时间:2024/06/14 02:41

animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率,简单点说就是动画的播放方式。

语法规则:

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

它和transition中的transition-timing-function一样,具有以下几种变换方式:ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。对应功如下:

在调用move动画播放中,让元素样式从初始状态到终止状态时,先加速再减速,也就是渐显渐隐效果。

任务

在右侧CSS编辑器第39行输入正确代码,让元素样式从初始状态到终止状态时,逐渐变慢。

<!DOCTYPEwww.dztcsd.com/ html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>


<div><span></span></div>
</body>
</html>

0 0
原创粉丝点击