1/************** DEFINITION of ANIMATIONS **************/
2// 'marked' effects
3@keyframes markAnim {
4    0% {
5        opacity: 0;
6        transform: scaleX(0.50) scaleY(0.50);
7    }
8    30% {
9        opacity: 1;
10        transform: scaleX(1.00) scaleY(1.00);
11    }
12    100% {
13        opacity: 0;
14        transform: scaleX(1.00) scaleY(1.00);
15    }
16}
17
18@-moz-keyframes markAnim {
19    0% {
20        opacity: 0;
21        -moz-transform: scaleX(0.50) scaleY(0.50);
22    }
23    30% {
24        opacity: 1;
25        -moz-transform: scaleX(1.00) scaleY(1.00);
26    }
27    100% {
28        opacity: 0;
29        -moz-transform: scaleX(1.00) scaleY(1.00);
30    }
31}
32
33@-webkit-keyframes markAnim {
34    0% {
35        opacity: 0;
36        -webkit-transform: scaleX(0.50) scaleY(0.50);
37    }
38    30% {
39        opacity: 1;
40        -webkit-transform: scaleX(1.00) scaleY(1.00);
41    }
42    100% {
43        opacity: 0;
44        -webkit-transform: scaleX(1.00) scaleY(1.00);
45    }
46}
47
48@-o-keyframes markAnim {
49    0% {
50        opacity: 0;
51        -o-transform: scaleX(0.50) scaleY(0.50);
52    }
53    30% {
54        opacity: 1;
55        -o-transform: scaleX(1.00) scaleY(1.00);
56    }
57    100% {
58        opacity: 0;
59        -o-transform: scaleX(1.00) scaleY(1.00);
60    }
61}
62
63@-ms-keyframes markAnim {
64    0% {
65        opacity: 0;
66        -ms-transform: scaleX(0.50) scaleY(0.50);
67    }
68    30% {
69        opacity: 1;
70        -ms-transform: scaleX(1.00) scaleY(1.00);
71    }
72    100% {
73        opacity: 0;
74        -ms-transform: scaleX(1.00) scaleY(1.00);
75    }
76}
77
78// 'bounce' effect
79@-webkit-keyframes bounceIn {
80  0%, 20%, 40%, 60%, 80%, 100% {
81    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
82            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
83  }
84
85  0% {
86    opacity: 0;
87    -webkit-transform: scale3d(.3, .3, .3);
88            transform: scale3d(.3, .3, .3);
89  }
90  20% {
91    -webkit-transform: scale3d(1.1, 1.1, 1.1);
92            transform: scale3d(1.1, 1.1, 1.1);
93  }
94  40% {
95    -webkit-transform: scale3d(.9, .9, .9);
96            transform: scale3d(.9, .9, .9);
97  }
98  60% {
99    opacity: 1;
100    -webkit-transform: scale3d(1.03, 1.03, 1.03);
101            transform: scale3d(1.03, 1.03, 1.03);
102  }
103  80% {
104    -webkit-transform: scale3d(.97, .97, .97);
105            transform: scale3d(.97, .97, .97);
106  }
107  100% {
108    opacity: 1;
109    -webkit-transform: scale3d(1, 1, 1);
110            transform: scale3d(1, 1, 1);
111  }
112}
113
114@keyframes bounceIn {
115  0%, 20%, 40%, 60%, 80%, 100% {
116    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
117            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
118  }
119  0% {
120    opacity: 0;
121    -webkit-transform: scale3d(.3, .3, .3);
122            transform: scale3d(.3, .3, .3);
123  }
124  20% {
125    -webkit-transform: scale3d(1.1, 1.1, 1.1);
126            transform: scale3d(1.1, 1.1, 1.1);
127  }
128  40% {
129    -webkit-transform: scale3d(.9, .9, .9);
130            transform: scale3d(.9, .9, .9);
131  }
132  60% {
133    opacity: 1;
134    -webkit-transform: scale3d(1.03, 1.03, 1.03);
135            transform: scale3d(1.03, 1.03, 1.03);
136  }
137  80% {
138    -webkit-transform: scale3d(.97, .97, .97);
139            transform: scale3d(.97, .97, .97);
140  }
141  100% {
142    opacity: 1;
143    -webkit-transform: scale3d(1, 1, 1);
144            transform: scale3d(1, 1, 1);
145  }
146}
147