css3怎样让动画不回弹
程序员文章站
2022-03-02 20:32:37
...
在css3中,可以利用“animation-fill-mode”属性设置动画之后不回弹,该属性用于规定动画在播放之前或之后,是否保持动画效果,语法为“animation-fill-mode:forwards;”。
本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。
css3怎样让动画不回弹
在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>
输出结果:
(学习视频分享:css视频教程)
以上就是css3怎样让动画不回弹的详细内容,更多请关注其它相关文章!
上一篇: css3的三种使用方法是什么
下一篇: 什么是css3和html
推荐阅读
-
怎样做青椒油辣子,让你无辣不欢
-
怎样让男人不偷吃 红酒木瓜拯救女人
-
如何让你的CSS3动画更具吸引力_html/css_WEB-ITnose
-
在HTML中怎样让Flash不遮挡div元素
-
15个让人惊讶的 CSS3 动画效果演示_html/css_WEB-ITnose
-
15个让人惊讶的 CSS3 动画效果演示_html/css_WEB-ITnose
-
怎样让后台传输到前台的HTML格式代码不转义?_html/css_WEB-ITnose
-
css下拉效果。怎样hover时让那个字不上升啊_html/css_WEB-ITnose
-
怎样让vue更改计算属性但是不更改select的选中值
-
怎样让html的下拉菜单提交后保留选中值不返回默认值