css3的animate动画属性小记,animate未执行动画时隐藏元素(animation-fill-mode和opacity同时使用参考3)

最新推荐文章于 2023-09-30 22:14:38 发布

hangGe0111

最新推荐文章于 2023-09-30 22:14:38 发布

阅读量2.6k

点赞数

分类专栏： animate 文章标签： animation

本文链接：https://blog.csdn.net/hangGe0111/article/details/81326449

版权

本文介绍了如何利用CSS3的animation属性结合animation-fill-mode和opacity来实现动画开始前隐藏元素，执行时显示的效果。同时，讲解了animation-iteration-count用于设置动画播放次数，animation-play-state控制动画的运行或暂停状态，以及animation-timing-function用于自定义动画速度曲线。通过这些技巧，可以在网页交互中实现更流畅的动画效果。

摘要由CSDN通过智能技术生成

注：例子和截图均参考菜鸟教程，地址：http://www.runoob.com/cssref/css3-pr-animation.html

1.html

<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
		<title>菜鸟教程(runoob.com)</title>
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				/*需做兼容处理*/
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite;
				-moz-animation: mymove 5s infinite;
				
			}	
			/*@keyframes定义动画名称*/		
			@keyframes mymove {
				from {
					left: 0px;
				}
				to {
					left: 200px;
				}
			}			
			@-webkit-keyframes mymove{
				from {
					left: 0px;
				}
				to {
					left: 200px;
				}
			}
			@-moz-keyframes mymove{
				from {
					left: 0px;
				}
				to {
					left: 200px;
				}
			}
		</style>
	</head>
	<body>
		<p><strong>注意: </strong> Internet Explorer 9 及更早IE版本不支持 animation 属性。</p>
		<div></div>
	</body>
</html>

2.语法（支持简写）

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	说明
animation-name

最低0.47元/天解锁文章

hangGe0111

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录