为网页加上动画效果

2018-03-18 Yazzyk

先来让我们看看这个，然后写出它的代码和注释

html部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
	<div class="demo"><div class="demo-animation"></div></div>		
</body>
</html>
css部分：
.demo{
	width: 300px;
	height: 300px;
	border: 1px solid #000;
}/*这个不是重点,下面那个才是*/
.demo-animation{
	width: 100px;/*宽度100像素*/
	height: 100px;/*高度100像素*/
	background: #f00;/*背景色为#f00(红色)*/
	position: relative;/*定位为相对，因为我想让它只在这框框的范围内移动*/
	left: 0px;/*这是在没有动画情况下的位置距离左侧0像素*/
	top: 0px;/*距离顶部0像素*/
	animation: demo1 5s;/*	所有动画属性的简写属性，除了 animation-play-state 属性，animation-name(名字)为demo，animation-duration(动画耗时)为5s*/
	animation-iteration-count: infinite;/\*animation-iteration-count(动画播放次数)为无限\*/
}
@keyframes demo1{/*@keyframes为规定动画*/
	0%{left: 0px; top: 0px;}/*在动画进行到0%时，方块demo-animation的位置为left:0px;top:0px;*/
	25%{left: 200px; top: 0px;}/*在动画进行到25%时，方块demo-animation的位置为left:200px;top: 0px;后面的以此类推*/
	50%{left: 200px; top: 200px;}
	75%{left: 0px; top: 200px;}
	100%{left: 0px; top: 0px;}
}/*其中值得注意的时position在.demo-animation已经提到了，所以在规定动画时不需要在提它，然后用margin好像不行，我也不知道行不行，反正我用着会出问题。*/

然后，这是关于animation熟悉的一张表格：

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 “ease”。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。 3
Web