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