温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css3中如何让动画不回弹

发布时间:2022-01-24 11:07:39 来源:亿速云 阅读:265 作者:kk 栏目:web开发

今天给大家介绍一下css3中如何让动画不回弹。文章的内容小编觉得不错,现在给大家分享一下,觉得有需要的朋友可以了解一下,希望对大家有所帮助,下面跟着小编的思路一起来阅读吧。

本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

css3怎样让动画不回弹

在css中想要实现动画不回弹需要利用到animation-fill-mode属性。

animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。

注释:其属性值是由逗号分隔的一个或多个填充模式关键词。

语法为:

animation-fill-mode : none | forwards | backwards | both;

其中可能的值为:

css3中如何让动画不回弹

示例如下:

<!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>

输出结果:

css3中如何让动画不回弹

css的三种引入方式

1.行内样式,最直接最简单的一种,直接对HTML标签使用style=""。2.内嵌样式,就是将CSS代码写在之间,并且用

进行声明。3.外部样式,其中链接样式是使用频率最高,最实用的样式,只需要在之间加上

就可以了。其次就是导入样式,导入样式和链接样式比较相似,采用@import样式导入CSS样式表,不建议使用。

以上就是css3中如何让动画不回弹的全部内容了,更多与css3中如何让动画不回弹相关的内容可以搜索亿速云之前的文章或者浏览下面的文章进行学习哈!相信小编会给大家增添更多知识,希望大家能够支持一下亿速云!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI