欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css3新增属性动画animation

程序员文章站 2022-03-16 16:44:11
...

一：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>

上一篇： ThinkPHP的基本使用方法(一)

下一篇： 拒绝被骗 选购专业显示器这几点必看

推荐阅读