css3新增属性动画animation

最新推荐文章于 2024-05-21 15:50:51 发布

lucky_girl_girl

最新推荐文章于 2024-05-21 15:50:51 发布

阅读量347

点赞数

本文链接：https://blog.csdn.net/lucky_girl_girl/article/details/104152968

版权

一：animation属性值
1.animation-name 动画名称（结合keyframe一起使用）
2.animation-duration 动画持续时间
3.animation-delay 动画延迟时间
4.animation-timing-function 动画运行轨迹
5.animation-iteration-count 动画运动次数
6.animation-direction 动画方向
alternate 先正向后反向需两次变动
alternate-reverse 先反向后正向
7.animation-fill-mode 决定动画起始状态
none 原始状态-动画开始-原始状态
forwards 原始状态-动画开始-动画帧100%状态
backwards 动画0帧开始-动画开始-原始状态处
both 动画帧0处开始-动画开始-动画帧100%处
8.animation-play-state 动画运行或停止
running 运行
paused 停止
二：支持百分数
keyframes{
0%{}
50%{}
100{%{}
}

在这里插入代码片
<html>
<style>
  div{
	position:relative;
	width:200px;
	height:200px;
	background-color:skyblue;
  }
  .p1{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:100px;
	height:100px;
	background-color:pink;
	animation:move 1s infinite alternate linear;
  }
  div:hover .p1{
   animation-play-state:paused;
  }
  @keyframes move{
	from{width:0;background-color:skyblue;}
	to{width:200px;background-color:green;}
  }
</style>
<body>
	<div>
		<p class="p1"></p>
	</div>
</body>
</html>

lucky_girl_girl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3新增属性动画animation

一：animation属性值1.animation-name 动画名称（结合keyframe一起使用）2.animation-duration 动画持续时间3.animation-delay 动画延迟时间4.animation-timing-function 动画运行轨迹5.animation-iteration-count 动画运动次数6.animation-direction 动画...
复制链接

扫一扫