- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- CSS动画匀速属性是什么，如何使用
CSS动画匀速属性是什么，如何使用
Admin 2022-11-01 群英技术资讯 1744 次浏览
今天就跟大家聊聊有关“CSS动画匀速属性是什么，如何使用”的内容，可能很多人都不太了解，为了让大家认识和更进一步的了解，小编给大家总结了以下内容，希望这篇“CSS动画匀速属性是什么，如何使用”文章能对大家有帮助。CSS3设置动画匀速的属性单词是哪个
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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
深入理解CSS3中变换模型渲染，有哪些知识点
相信很多小伙伴们对于CSS3中transform变换模型的渲染都是非常感兴趣的，下文的讲解详细，步骤过程清晰，对大家进一步学习和理解相关知识有一定的帮助。有这方面学习需要的朋友就继续往下看吧！
-
CSS中元素浮动和清除分别怎样实现
这篇文章主要介绍了CSS实现元素浮动和清除浮动的方法,简单介绍了浮动的基本知识，通过截图代码的形式给大家介绍了css清除浮动的方法，需要的朋友可以参考下
-
在CSS3中元素向左偏移的效果怎么实现
在css中，向左偏移的样式是“transform:translate(-向左偏移距离值);”；transform属性的作用是允许我们对元素进行旋转、缩放、移动或倾斜操作，translate()函数的作用是定义元素的平移转换。
-
如何用HTML+CSS写一个等待的loading效果
本文主要介绍了纯html+css实现Element loading效果，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
-
在CSS中BFC的作用有哪些，如何创建使用
这篇文章主要介绍了CSS 清除浮动、BFC的相关资料,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前：400-678-4567
7x24小时售后：0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话：010-58813000
服务邮箱：service@cnnic.cn
投诉与建议：0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准（ICP备案）粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
