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

CSSanimation

程序员文章站 2024-03-24 21:04:34
...

css的animation属性是css3新增的一个动画属性,这个属性比较简单实用,甚至可以替代一些要js才能做的动画。
语法:

说明
animation-name 绑定 frames的名字
animation-duration 动画需要在多少秒完成
animation-delay 动画延迟多少秒触发
animation-timeing-function 动画运动的方式,运动曲线和流程
animation-iteration-count 制定动画运动的次数,如果为infinite则是无限次重复播放
animation-direction 是否轮流反向播放动画
animation-play-state 控制元素动画的播放状态 running 和paused running是默认值

常用简写:
//参数 要绑定的运动名称 | 运动持续时间 | 运动曲线| 延迟时间| 重复次数|动画轮流反向执行
animation:run 3s linear 0.5s infinite alertnate

div{
	width:300px;
	height:260px;
	background:#F2F2F2;
	animation: run 3s;
}


@keyframes run{
	from{
		width:300px
		height:260px
		background:#F2F2F2;
		rotate:(0deg)
	}
	to{
		width:600px;
		height:550px
		background:#67686D;
		rotate:(360deg)

	}
}

//这段代码会让div从宽300px,高260px,背景颜色#F2F2F2f, 3秒逐渐变化至w:600px,h:550px,bg:#67686D,顺便旋转个360度

@keyframes run{
	0%{
		width:300px
		height:260px
		background:#F2F2F2;
	}
	50%{
		width:400px;
		height:350px
		background:#67686D;
	}
	100%{
		width:500px;
		height:450px
		background:#67686D;
	}
}
//当然了也可用百分百,这个东西甚至可以用来做轮播图。

div:honver{
  animation-play-state:paused;
}
相关标签: CSS JS

推荐阅读