forked from olton/metroui
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathanimations.html
More file actions
135 lines (119 loc) · 6.94 KB
/
Copy pathanimations.html
File metadata and controls
135 lines (119 loc) · 6.94 KB
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
<meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<title>Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style</title>
<link href="css/metro.css" rel="stylesheet">
<link href="css/metro-icons.css" rel="stylesheet">
<link href="css/metro-responsive.css" rel="stylesheet">
<link href="css/docs.css" rel="stylesheet">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/metro.js"></script>
<script src="js/docs.js"></script>
<script src="js/prettify/run_prettify.js"></script>
<script src="js/ga.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<style>
.icon-list li {
width: 16%;
padding: .625rem;
cursor: pointer;
vertical-align: baseline;
font-size: .9em;
}
.ani-demo-cube, .ani-demo-cyrcle{
width: 1rem;
height: 1rem;
background: darkred;
display: block;
float: left;
margin-right: 10px;
}
.ani-demo-cyrcle {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="container page-content">
<h1><a href="index.html" class="nav-button transform"><span></span></a> Animations</h1>
@@adsense
<div class="margin20 no-margin-left no-margin-right sub-header text-light">
You can use built-in animations for any elements on you site. To use animation add class <span class="tag">ani-*</span> to element. To change animation speed add classes: <span class="tag">ani-fast</span> or <span class="tag">ani-slow</span>
</div>
<div class="example">
<h5>Normal speed</h5>
<ul class="inline-list icon-list">
<li><span class="ani-demo-cube ani-spin"></span> spin</li>
<li><span class="ani-demo-cube ani-pulse"></span> pulse</li>
<li><span class="ani-demo-cube ani-spanner"></span> spanner</li>
<li><span class="ani-demo-cube ani-ring"></span> bell</li>
<li><span class="ani-demo-cube ani-vertical"></span> vertical</li>
<li><span class="ani-demo-cube ani-horizontal"></span> horizontal</li>
<li><span class="ani-demo-cube ani-flash"></span> flash</li>
<li><span class="ani-demo-cube ani-bounce"></span> bounce</li>
<li><span class="ani-demo-cube ani-float"></span> float</li>
<li><span class="ani-demo-cube ani-heartbeat"></span> heartbeat</li>
<li><span class="ani-demo-cube ani-shake"></span> shake</li>
<li><span class="ani-demo-cube ani-shuttle"></span> shuttle</li>
<li><span class="ani-demo-cube ani-pass"></span> pass</li>
<li><span class="ani-demo-cube ani-ripple"></span> ripple</li>
</ul>
<h5>Fast speed (with subclass ani-fast)</h5>
<ul class="inline-list icon-list">
<li><span class="ani-demo-cube ani-spin ani-fast"></span> spin</li>
<li><span class="ani-demo-cube ani-pulse ani-fast"></span> pulse</li>
<li><span class="ani-demo-cube ani-spanner ani-fast"></span> spanner</li>
<li><span class="ani-demo-cube ani-ring ani-fast"></span> bell</li>
<li><span class="ani-demo-cube ani-vertical ani-fast"></span> vertical</li>
<li><span class="ani-demo-cube ani-horizontal ani-fast"></span> horizontal</li>
<li><span class="ani-demo-cube ani-flash ani-fast"></span> flash</li>
<li><span class="ani-demo-cube ani-bounce ani-fast"></span> bounce</li>
<li><span class="ani-demo-cube ani-float ani-fast"></span> float</li>
<li><span class="ani-demo-cube ani-heartbeat ani-fast"></span> heartbeat</li>
<li><span class="ani-demo-cube ani-shake ani-fast"></span> shake</li>
<li><span class="ani-demo-cube ani-shuttle ani-fast"></span> shuttle</li>
<li><span class="ani-demo-cube ani-pass ani-fast"></span> pass</li>
<li><span class="ani-demo-cube ani-ripple ani-fast"></span> ripple</li>
</ul>
<h5>Slow speed (with subclass ani-slow)</h5>
<ul class="inline-list icon-list">
<li><span class="ani-demo-cube ani-spin ani-slow"></span> spin</li>
<li><span class="ani-demo-cube ani-pulse ani-slow"></span> pulse</li>
<li><span class="ani-demo-cube ani-spanner ani-slow"></span> spanner</li>
<li><span class="ani-demo-cube ani-ring ani-slow"></span> bell</li>
<li><span class="ani-demo-cube ani-vertical ani-slow"></span> vertical</li>
<li><span class="ani-demo-cube ani-horizontal ani-slow"></span> horizontal</li>
<li><span class="ani-demo-cube ani-flash ani-slow"></span> flash</li>
<li><span class="ani-demo-cube ani-bounce ani-slow"></span> bounce</li>
<li><span class="ani-demo-cube ani-float ani-slow"></span> float</li>
<li><span class="ani-demo-cube-heart ani-heartbeat ani-slow"></span> heartbeat</li>
<li><span class="ani-demo-cube ani-shake ani-slow"></span> shake</li>
<li><span class="ani-demo-cube ani-shuttle ani-slow"></span> shuttle</li>
<li><span class="ani-demo-cube ani-pass ani-slow"></span> pass</li>
<li><span class="ani-demo-cube ani-ripple ani-slow"></span> ripple</li>
</ul>
<p>
To use animation only on-hover use classes with <span class="tag">ani-hover-*</span>.
</p>
</div>
<div class="example" data-text="code">
<pre class="prettyprint linenums"><code>
<div class="ani-spin"></div>
<div class="ani-spin ani-slow"></div>
<div class="ani-spin ani-fast"></div>
</code></pre>
</div>
<div class="padding10 bg-lighterBlue fg-white margin10 no-margin-right no-margin-left align-center">
Special thanks to <a href="https://github.com/MenesesEvandro" class="text-accent text-bold fg-white">Meneses Evandro</a> for adding this animations.
</div>
</div>
@@hit
</body>
</html>