CSS3的动画

发布者：s5s5 CSS3的动画有 12 条评论

最近研究CSS3的动画，还是相当的强大啊，做了一个小皮球跳跳的动画 DEMO，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

< !doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 animation</title>
<style>
.animation {
	-webkit-animation-name: bounce;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 10;
	-webkit-animation-direction: alternate;
	-webkit-border-radius:100px;
	position: relative;
	left: 0;
	top:100px;
	width:100px;
	height:100px;
	text-align:center;
	line-height:100px;
	background:#F00;
}
@-webkit-keyframes bounce {
	from {
		top: 0;
		-webkit-animation-timing-function: ease-out;
	}
	25% {
		top: 110px;
		-webkit-animation-timing-function: ease-out;
	}
	50% {
		top: 50px;
		-webkit-animation-timing-function: ease-out;
	}
	75% {
		top: 90px;
		-webkit-animation-timing-function: ease-out;
	}
	to {
		top: 100px;
	}
}
</style>
</head>
<body>
<div class="animation">皮球</div>
</body>
</html>


参考文档：
CSS Animation
Safari CSS Reference
CSS Animations Module Level 3
你需要知道的CSS3 动画技术
CSS3变换入门
CSS3 鼠标悬停动画

发布者：s5s5

https://s5s5.me

“CSS3的动画”上的12条回复

评论已关闭。