CSS3的动画

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

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /www/wwwroot/s5s5.me/wp-content/plugins/wp-syntax/wp-syntax.php on line 380

最近研究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>

< !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条回复

评论已关闭。

退出移动版