CSS动画匀速属性是什么,如何使用
Admin 2022-11-01 群英技术资讯 862 次浏览
animation-timing-function 规定动画的速度曲线。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。
语法为:
animation-timing-function: value;
animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。您能够在该函数中使用自己的值,也可以预定义的值:
示例如下:
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; animation-timing-function:linear; /* Safari and Chrome */ -webkit-animation:mymove 5s infinite; -webkit-animation-timing-function:linear; } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {left:0px;} to {left:200px;} } </style> </head> <body> <p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。</p> <div></div> </body> </html>
输出结果:
到此,关于“CSS动画匀速属性是什么,如何使用”的学习就结束了,希望能够解决大家的疑惑,另外大家动手实践也很重要,对大家加深理解和学习很有帮助。如果想要学习更多的相关知识,欢迎关注群英网络,小编每天都会给大家分享实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
在css中,可以利用“@charset”规则来将字符编码设置为“utf-8”,该规则可以指定样式文件中使用的字符编码,语法为“@charset "UTF-8";”;“@charset”规则必须是样式表中的第一个元素,前面不得有任何字符。
这篇文章主要介绍了CSS 利用table实现五种常用布局的方法示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{response.setContentType("text/html;charset=utf-8");
使用CSS怎样实现图片百叶窗的效果?图片百叶窗的展示效果还是比较比较常见的,那么这一效果是怎样做的呢?这篇文章给大家分享用CSS实现图片百叶窗的效果的方法,实现效果及代码如下:
小编今天来给大家说说看HTML+CSS单列和水平居中布局的相关介绍,下文有实例供大家参考,对大家了解操作过程或相关知识有一定的帮助,而且实用性强,希望这篇文章能帮助大家,下面我们一起来了解看看吧。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008