您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
今天给大家介绍一下css3中如何让动画不回弹。文章的内容小编觉得不错，现在给大家分享一下，觉得有需要的朋友可以了解一下，希望对大家有所帮助，下面跟着小编的思路一起来阅读吧。
本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。
在css中想要实现动画不回弹需要利用到animation-fill-mode属性。
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
注释：其属性值是由逗号分隔的一个或多个填充模式关键词。
语法为：
animation-fill-mode : none | forwards | backwards | both;
其中可能的值为：
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
margin:0 auto;
background-color:pink;
animation:fadenum 5s;
animation-fill-mode:forwards;
}
@keyframes fadenum{
100%{width:300px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>输出结果：
1.行内样式，最直接最简单的一种，直接对HTML标签使用style=""。2.内嵌样式，就是将CSS代码写在之间，并且用
进行声明。3.外部样式，其中链接样式是使用频率最高，最实用的样式，只需要在之间加上
以上就是css3中如何让动画不回弹的全部内容了，更多与css3中如何让动画不回弹相关的内容可以搜索亿速云之前的文章或者浏览下面的文章进行学习哈！相信小编会给大家增添更多知识,希望大家能够支持一下亿速云！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。