- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- CSS动画匀速属性是什么，如何使用
CSS动画匀速属性是什么，如何使用
Admin 2022-11-01 群英技术资讯 815 次浏览
今天就跟大家聊聊有关“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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
新手入门HTML有哪些JavaScript数据类型基础知识要掌握
这篇文章主要介绍了萌新如何入门html5，帮助大家更好的理解和制作网页，感兴趣的朋友可以了解下
-
CSS的行内样式、内嵌样式和外部引用样式如何用？
这篇文章给大家分享的是CSS的行内样式、内嵌样式和外部引用样式的使用。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。
-
CSS伪类函数is()和where()如何使用，有什么差异
在编写 CSS 时，有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如，如果您想对标题中的 b 标签进行颜色调整，我们应该都写过这样的代码： h1 > b, h2 > b, h3 > b, h4 > b, h5 >...
-
9个常用css技巧分享,新手看过来
新手在刚接触和学习CSS时，了解一些技巧对我们的帮助是很大的，可以帮助我们少走一些弯路，减少一些不必要的步骤，能够更快的完成代码的写入。下面就分享一些常用和实用CSS技巧，希望对大家学习有帮助。
-
CSS中做可控虚线的方法是什么，有何技巧
这篇文章主要介绍了css实现可控虚线的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
