- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- CSS动画匀速属性是什么，如何使用
CSS动画匀速属性是什么，如何使用
Admin 2022-11-01 群英技术资讯 970 次浏览
今天就跟大家聊聊有关“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实现王者匹配时的粒子动画效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
-
在CSS中outline方法怎么用，有什么事项要注意
css中outline方法的使用：1、如果只需要两层边框，可以选择先设置一层常规边框，再加上outline(描边)属性来生成外层边框。2、outline-offset属性可以控制边缘和元素边缘之间的间距，该属性可以接受负值。
-
CSS中单位的百分比用法及含义是怎样的
CSS支持多种单位形式，如百分比、px、pt、rem等，百分比和px是常用的单位，随着移动端和响应式的流行，rem、vh、vw也开始普遍使用，这些单位你可能未必知道，想了解？可以戳此文：CSS：7个你可能不认识的单位。今天在SegmentFault社区碰到了两个关于百分比计算的问题，一个是在translate中使用百分比的时候，是相对于哪个DO ...
-
用CSS怎样实现一个简单的波浪效果？
今天给大家分享的是关于用CSS实现简单的波浪效果的内容，如果是纯 CSS 实现波浪效果还是比较困难的，而本文使用 CSS 实现的波浪效果的思路非常有意思，下文有有实例和详细注释供大家参考，感兴趣的朋友接下来跟随小编一起看看吧。
-
CSS中实现图片垂直居中的代码是什么
方法：1、给照片元素的父元素添加相对定位样式，给照片元素添加绝对定位样式；2、利用top属性和“margin-top”属性设置照片垂直居中，只需要给照片元素添加“top:50%;margin-top:上外边距值;”样式即可。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
