animation 动画属性
2018-06-24 00:54:52来源:未知 阅读 ()
animation-name: 选择器名称
animation-duration: 完成动画所需时间
animation-timing-function: 动画的速度曲线
值 | 描述 | 测试 |
---|---|---|
linear | 动画从头到尾的速度是相同的。 | 测试 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 | 测试 |
ease-in | 动画以低速开始。 | 测试 |
ease-out | 动画以低速结束。 | 测试 |
ease-in-out | 动画以低速开始和结束。 | 测试 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 | |
JavaScript 语法: | object.style.animationTimingFunction="linear" |
animation-delay: 动画开始之前的延迟
animation-iteration-count: 播放的次数
animation-direction: 是否应该轮流反向播放动画
值 | 描述 | 测试 |
---|---|---|
normal | 默认值。动画应该正常播放。 | 测试 |
alternate | 动画应该轮流反向播放。 | 测试 |
CSS语法 | animation-direction: normal|alternate; |
案例:
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -moz-animation:mymove 5s infinite; /* Firefox */ -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ -o-animation:mymove 5s infinite; /* Opera */ } @keyframes mymove { from {top:0px;} to {top:200px;} } @-moz-keyframes mymove /* Firefox */ { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {top:0px;} to {top:200px;} } @-o-keyframes mymove /* Opera */ { from {top:0px;} to {top:200px;} } </style> </head> <body> <p><b>注释:</b>本例在 Internet Explorer 中无效。</p> <div></div> </body> </html>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:Math中的floor,round和ceil方法总结
下一篇:选项卡制作
- 6.动画 2020-05-24
- CSS常用属性(入门级),持续更新 2020-05-22
- 【Vue】基础(数据 & 计算属性 & 方法) 2020-04-22
- html表单控件禁用属性:readonly VS disabled【转】 2020-04-13
- 利用vertical-align属性实现分隔符 2020-04-03
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash