animation的属性值

最新推荐文章于 2023-07-16 16:04:14 发布

小宝html5基础的感习

最新推荐文章于 2023-07-16 16:04:14 发布

阅读量632

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/qq_41936213/article/details/104720198

版权

animation的属性值

animation的含义：是动画的意思，是随着时间改变元素的属性值，它在没有的触发任何事件的情况下也可以随着时间的变化来改变css的属性值，从而达到一种动画的效果。css3的animetion就是需要明确的动画属性值。
初始效果——动画帧——动画帧——最终效果

animetion有8个属性值，如下：

1、animetion-name:它是检索或设置对象所应用的动画名称，与@keyframes起使用的，有两种语法。
语法1：@keyframes：myname{ from{初始的状态属性} to{结束的状态属性}}
语法2：@keyframes：myname{ 0%{初始的状态属性} 100%{结束的状态属性}}
2、animetion-duration:检索或设置动画对象的设置时间，以秒和毫秒为单位（s/ms）。
3、animetion-delay：它是检索或设置动画对象的延迟时间：以秒和毫秒为单位的。
4、animetion=timing-funtion:它是检索会设置动画的过度的。它有六个值：
linear:线性过度
ease:平滑过渡
ease-in:由慢到快
ease-out:由快到慢
ease-in-out:由慢到快，再到慢
step-start:马上跳到动画每一帧的结束状态
5、animetion-iteration-count:检索或设置动画的循环次数（有两个值：infinite：无线循环/number:循环次数）
6、animetion-direction:它是检索或设置对象动画，在循环中是否反向运动的状态。（属性值：normal 正常方向 / reverse 反向运行 / alternate-reverse：先反向运行在正向运行，并持续交替运行）

7、animetion-fill-mode:动画播放之前或之后，其动画效果为可见或不见 none：默认值
,运动结束后回到原来的位置，在延迟的时候，让0%延迟后生效 backwords:在延迟时，让0%在延迟前生效
forwords:在运动结束后，停到结束位置 both:让backwords和forwords同时生效

8、animetion-play-state:检索或设置动画对象的状态不（属性值：running/paused）
例子

<style type="text/css">
			body{width: 1000px;
			height:1000px;}
			
			.box{
				width: 100px;
				height: 100px;
				background: #f0f;
				margin: 50px auto;
				animation: move 2s  ;
				animation-delay: 0.5s;
				animation-iteration-count: 5;/*设置动画的循环次数*/
			}
			@-webkit-keyframes move{
				0%{background: #00ff00;}
				50%{background: #c333c3;}
				100%{background: #e6e6e6;}
			}
			.box2{
				width: 100px;
				height: 100px;
				background: #00f;
				margin: 80px auto;
				animation: donghua 5s ;
				animation-delay: 1s;/*动画延迟1秒*/
			}
			div:hover{
				animation-play-state: paused;/*鼠标滑过之后动画停止*/
			}
		</style>
		
		<body>
		<div class="box">
			ggggg
		</div>
		<div class="box2">
			
		</div>

在这里插入图片描述
以上是分享就到这啦，如有欠缺的欢迎建议喔

小宝html5基础的感习

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
animation的属性值

animation的属性值animation的含义：是动画的意思，是随着时间改变元素的属性值，它在没有的触发任何事件的情况下也可以随着时间的变化来改变css的属性值，从而达到一种动画的效果。css3的animetion就是需要明确的动画属性值。初始效果——动画帧——动画帧——最终效果animetion有8个属性值，如下：1、animetion-name:它是检索或设置对象所应用的动画名称，...
复制链接

扫一扫