source: pro-violet-viettel/sourcecode/assets/css/less/icon-animated.less @ 892

Last change on this file since 892 was 313, checked in by dungnv, 11 years ago
File size: 6.9 KB
Line 
1/* custom animated icons */
2.icon-animated-bell {
3  display: inline-block;
4  .animation(~"ringing 2.0s 5 ease 1.0s"); 
5  .transform-origin(~"50% 0%");
6}
7
8@-moz-keyframes ringing {
9  0% { -moz-transform: rotate(-15deg);}
10  2% { -moz-transform: rotate(15deg);}
11  4% { -moz-transform: rotate(-18deg);}
12  6% { -moz-transform: rotate(18deg);}
13  8% { -moz-transform: rotate(-22deg);}
14  10% { -moz-transform: rotate(22deg);}
15  12% { -moz-transform: rotate(-18deg);}
16  14% { -moz-transform: rotate(18deg);}
17  16% { -moz-transform: rotate(-12deg);}
18  18% { -moz-transform: rotate(12deg);}
19  20% { -moz-transform: rotate(0deg);}
20}
21
22@-webkit-keyframes ringing {
23  0% { -webkit-transform: rotate(-15deg);}
24  2% { -webkit-transform: rotate(15deg);}
25  4% { -webkit-transform: rotate(-18deg);}
26  6% { -webkit-transform: rotate(18deg);}
27  8% { -webkit-transform: rotate(-22deg);}
28  10% { -webkit-transform: rotate(22deg);}
29  12% { -webkit-transform: rotate(-18deg);}
30  14% { -webkit-transform: rotate(18deg);}
31  16% { -webkit-transform: rotate(-12deg);}
32  18% { -webkit-transform: rotate(12deg);}
33  20% { -webkit-transform: rotate(0deg);}
34}
35
36@-ms-keyframes ringing {
37  0% { -ms-transform: rotate(-15deg);}
38  2% { -ms-transform: rotate(15deg);}
39  4% { -ms-transform: rotate(-18deg);}
40  6% { -ms-transform: rotate(18deg);}
41  8% { -ms-transform: rotate(-22deg);}
42  10% { -ms-transform: rotate(22deg);}
43  12% { -ms-transform: rotate(-18deg);}
44  14% { -ms-transform: rotate(18deg);}
45  16% { -ms-transform: rotate(-12deg);}
46  18% { -ms-transform: rotate(12deg);}
47  20% { -ms-transform: rotate(0deg);}
48}
49
50@keyframes ringing {
51  0% { transform: rotate(-15deg);}
52  2% { transform: rotate(15deg);}
53  4% { transform: rotate(-18deg);}
54  6% { transform: rotate(18deg);}
55  8% { transform: rotate(-22deg);}
56  10% { transform: rotate(22deg);}
57  12% { transform: rotate(-18deg);}
58  14% { transform: rotate(18deg);}
59  16% { transform: rotate(-12deg);}
60  18% { transform: rotate(12deg);}
61  20% { transform: rotate(0deg);}
62}
63
64
65
66.icon-animated-vertical  {
67  display: inline-block;
68  .animation(~"vertical 2.0s 5 ease 2.0s");
69}
70
71@-moz-keyframes vertical {
72  0% { -moz-transform: translate(0,-3px);}
73  4% { -moz-transform: translate(0,3px);}
74  8% { -moz-transform: translate(0,-3px);}
75  12% { -moz-transform: translate(0,3px);}
76  16% { -moz-transform: translate(0,-3px);}
77  20% { -moz-transform: translate(0,3px);}
78  22% { -moz-transform: translate(0,0);}
79}
80@-webkit-keyframes vertical {
81  0% { -webkit-transform: translate(0,-3px);}
82  4% { -webkit-transform: translate(0,3px);}
83  8% { -webkit-transform: translate(0,-3px);}
84  12% { -webkit-transform: translate(0,3px);}
85  16% { -webkit-transform: translate(0,-3px);}
86  20% { -webkit-transform: translate(0,3px);}
87  22% { -webkit-transform: translate(0,0);}
88}
89@-ms-keyframes vertical {
90  0% { -ms-transform: translate(0,-3px);}
91  4% { -ms-transform: translate(0,3px);}
92  8% { -ms-transform: translate(0,-3px);}
93  12% { -ms-transform: translate(0,3px);}
94  16% { -ms-transform: translate(0,-3px);}
95  20% { -ms-transform: translate(0,3px);}
96  22% { -ms-transform: translate(0,0);}
97}
98@keyframes vertical {
99  0% { transform: translate(0,-3px);}
100  4% { transform: translate(0,3px);}
101  8% { transform: translate(0,-3px);}
102  12% { transform: translate(0,3px);}
103  16% { transform: translate(0,-3px);}
104  20% { transform: translate(0,3px);}
105  22% { transform: translate(0,0);}
106}
107
108
109
110.icon-animated-hand-pointer  {
111  display: inline-block;
112  .animation(~"hand-pointer 2.0s 4 ease 2.0s");
113}
114
115@-moz-keyframes hand-pointer {
116  0% { -moz-transform: translate(0,0);}
117  6% { -moz-transform: translate(5px,0);}
118  12% { -moz-transform: translate(0,0);}
119  18% { -moz-transform: translate(5px,0);}
120  24% { -moz-transform: translate(0,0);}
121  30% { -moz-transform: translate(5px,0);}
122  36% { -moz-transform: translate(0,0);}
123}
124
125
126
127
128
129
130
131
132
133.icon-animated-wrench {
134  display: inline-block;
135  .animation(~"wrenching 2.5s 4 ease");
136  .transform-origin(~"90% 35%");
137}
138
139@-moz-keyframes wrenching {
140  0% { -moz-transform: rotate(-12deg);}
141  8% { -moz-transform: rotate(12deg);}
142
143  10% { -moz-transform: rotate(24deg);}
144  18% { -moz-transform: rotate(-24deg);}
145
146  20% { -moz-transform: rotate(-24deg);}
147  28% { -moz-transform: rotate(24deg);}
148
149  30% { -moz-transform: rotate(24deg);}
150  38% { -moz-transform: rotate(-24deg);}
151
152  40% { -moz-transform: rotate(-24deg);}
153  48% { -moz-transform: rotate(24deg);}
154
155  50% { -moz-transform: rotate(24deg);}
156  58% { -moz-transform: rotate(-24deg);}
157
158  60% { -moz-transform: rotate(-24deg);}
159  68% { -moz-transform: rotate(24deg);}
160
161  75% { -moz-transform: rotate(0deg);}
162}
163
164@-webkit-keyframes wrenching {
165  0% { -webkit-transform: rotate(-12deg);}
166  8% { -webkit-transform: rotate(12deg);}
167
168  10% { -webkit-transform: rotate(24deg);}
169  18% { -webkit-transform: rotate(-24deg);}
170
171  20% { -webkit-transform: rotate(-24deg);}
172  28% { -webkit-transform: rotate(24deg);}
173
174  30% { -webkit-transform: rotate(24deg);}
175  38% { -webkit-transform: rotate(-24deg);}
176
177  40% { -webkit-transform: rotate(-24deg);}
178  48% { -webkit-transform: rotate(24deg);}
179
180  50% { -webkit-transform: rotate(24deg);}
181  58% { -webkit-transform: rotate(-24deg);}
182
183  60% { -webkit-transform: rotate(-24deg);}
184  68% { -webkit-transform: rotate(24deg);}
185
186  75% { -webkit-transform: rotate(0deg);}
187}
188
189@-o-keyframes wrenching {
190  0% { -o-transform: rotate(-12deg);}
191  8% { -o-transform: rotate(12deg);}
192
193  10% { -o-transform: rotate(24deg);}
194  18% { -o-transform: rotate(-24deg);}
195
196  20% { -o-transform: rotate(-24deg);}
197  28% { -o-transform: rotate(24deg);}
198
199  30% { -o-transform: rotate(24deg);}
200  38% { -o-transform: rotate(-24deg);}
201
202  40% { -o-transform: rotate(-24deg);}
203  48% { -o-transform: rotate(24deg);}
204
205  50% { -o-transform: rotate(24deg);}
206  58% { -o-transform: rotate(-24deg);}
207
208  60% { -o-transform: rotate(-24deg);}
209  68% { -o-transform: rotate(24deg);}
210
211  75% { -o-transform: rotate(0deg);}
212}
213
214@-ms-keyframes wrenching {
215  0% { -ms-transform: rotate(-12deg);}
216  8% { -ms-transform: rotate(12deg);}
217
218  10% { -ms-transform: rotate(24deg);}
219  18% { -ms-transform: rotate(-24deg);}
220
221  20% { -ms-transform: rotate(-24deg);}
222  28% { -ms-transform: rotate(24deg);}
223 
224  30% { -ms-transform: rotate(24deg);}
225  38% { -ms-transform: rotate(-24deg);}
226
227  40% { -ms-transform: rotate(-24deg);}
228  48% { -ms-transform: rotate(24deg);}
229
230  50% { -ms-transform: rotate(24deg);}
231  58% { -ms-transform: rotate(-24deg);}
232
233  60% { -ms-transform: rotate(-24deg);}
234  68% { -ms-transform: rotate(24deg);}
235
236  75% { -ms-transform: rotate(0deg);}
237}
238
239@keyframes wrenching {
240  0% { transform: rotate(-12deg);}
241  8% { transform: rotate(12deg);}
242
243  10% { transform: rotate(24deg);}
244  18% { transform: rotate(-24deg);}
245   
246  20% { transform: rotate(-24deg);}
247  28% { transform: rotate(24deg);}
248 
249  30% { transform: rotate(24deg);}
250  38% { transform: rotate(-24deg);}
251
252  40% { transform: rotate(-24deg);}
253  48% { transform: rotate(24deg);}
254
255  50% { transform: rotate(24deg);}
256  58% { transform: rotate(-24deg);}
257
258  60% { transform: rotate(-24deg);}
259  68% { transform: rotate(24deg);}
260
261  75% { transform: rotate(0deg);}
262}
Note: See TracBrowser for help on using the repository browser.