owl.carousel.css 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. /*
  2. * Core Owl Carousel CSS File
  3. * v1.24
  4. */
  5. /* clearfix */
  6. .owl-carousel .owl-wrapper:after {
  7. content: ".";
  8. display: block;
  9. clear: both;
  10. visibility: hidden;
  11. line-height: 0;
  12. height: 0;
  13. }
  14. /* display none until init */
  15. .owl-carousel{
  16. display: none;
  17. position: relative;
  18. width: 100%;
  19. -ms-touch-action: pan-y;
  20. }
  21. .owl-carousel .owl-wrapper{
  22. display: none;
  23. position: relative;
  24. -webkit-transform: translate3d(0px, 0px, 0px);
  25. }
  26. .owl-carousel .owl-wrapper-outer{
  27. overflow: hidden;
  28. position: relative;
  29. width: 100%;
  30. }
  31. .owl-carousel .owl-wrapper-outer.autoHeight{
  32. -webkit-transition: height 500ms ease-in-out;
  33. -moz-transition: height 500ms ease-in-out;
  34. -ms-transition: height 500ms ease-in-out;
  35. -o-transition: height 500ms ease-in-out;
  36. transition: height 500ms ease-in-out;
  37. }
  38. .owl-carousel .owl-item{
  39. float: left;
  40. }
  41. .owl-controls .owl-page,
  42. .owl-controls .owl-buttons div{
  43. cursor: pointer;
  44. }
  45. .owl-controls {
  46. -webkit-user-select: none;
  47. -khtml-user-select: none;
  48. -moz-user-select: none;
  49. -ms-user-select: none;
  50. user-select: none;
  51. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  52. }
  53. /* mouse grab icon */
  54. .grabbing {
  55. cursor:url(grabbing.png) 8 8, move;
  56. }
  57. /* fix */
  58. .owl-carousel .owl-wrapper,
  59. .owl-carousel .owl-item{
  60. -webkit-backface-visibility: hidden;
  61. -moz-backface-visibility: hidden;
  62. -ms-backface-visibility: hidden;
  63. -webkit-transform: translate3d(0,0,0);
  64. -moz-transform: translate3d(0,0,0);
  65. -ms-transform: translate3d(0,0,0);
  66. }
  67. /* CSS3 Transitions */
  68. .owl-origin {
  69. -webkit-perspective: 1200px;
  70. -webkit-perspective-origin-x : 50%;
  71. -webkit-perspective-origin-y : 50%;
  72. -moz-perspective : 1200px;
  73. -moz-perspective-origin-x : 50%;
  74. -moz-perspective-origin-y : 50%;
  75. perspective : 1200px;
  76. }
  77. /* fade */
  78. .owl-fade-out {
  79. z-index: 10;
  80. -webkit-animation: fadeOut .7s both ease;
  81. -moz-animation: fadeOut .7s both ease;
  82. animation: fadeOut .7s both ease;
  83. }
  84. .owl-fade-in {
  85. -webkit-animation: fadeIn .7s both ease;
  86. -moz-animation: fadeIn .7s both ease;
  87. animation: fadeIn .7s both ease;
  88. }
  89. /* backSlide */
  90. .owl-backSlide-out {
  91. -webkit-animation: backSlideOut 1s both ease;
  92. -moz-animation: backSlideOut 1s both ease;
  93. animation: backSlideOut 1s both ease;
  94. }
  95. .owl-backSlide-in {
  96. -webkit-animation: backSlideIn 1s both ease;
  97. -moz-animation: backSlideIn 1s both ease;
  98. animation: backSlideIn 1s both ease;
  99. }
  100. /* goDown */
  101. .owl-goDown-out {
  102. -webkit-animation: scaleToFade .7s ease both;
  103. -moz-animation: scaleToFade .7s ease both;
  104. animation: scaleToFade .7s ease both;
  105. }
  106. .owl-goDown-in {
  107. -webkit-animation: goDown .6s ease both;
  108. -moz-animation: goDown .6s ease both;
  109. animation: goDown .6s ease both;
  110. }
  111. /* scaleUp */
  112. .owl-fadeUp-in {
  113. -webkit-animation: scaleUpFrom .5s ease both;
  114. -moz-animation: scaleUpFrom .5s ease both;
  115. animation: scaleUpFrom .5s ease both;
  116. }
  117. .owl-fadeUp-out {
  118. -webkit-animation: scaleUpTo .5s ease both;
  119. -moz-animation: scaleUpTo .5s ease both;
  120. animation: scaleUpTo .5s ease both;
  121. }
  122. /* Keyframes */
  123. /*empty*/
  124. @-webkit-keyframes empty {
  125. 0% {opacity: 1}
  126. }
  127. @-moz-keyframes empty {
  128. 0% {opacity: 1}
  129. }
  130. @keyframes empty {
  131. 0% {opacity: 1}
  132. }
  133. @-webkit-keyframes fadeIn {
  134. 0% { opacity:0; }
  135. 100% { opacity:1; }
  136. }
  137. @-moz-keyframes fadeIn {
  138. 0% { opacity:0; }
  139. 100% { opacity:1; }
  140. }
  141. @keyframes fadeIn {
  142. 0% { opacity:0; }
  143. 100% { opacity:1; }
  144. }
  145. @-webkit-keyframes fadeOut {
  146. 0% { opacity:1; }
  147. 100% { opacity:0; }
  148. }
  149. @-moz-keyframes fadeOut {
  150. 0% { opacity:1; }
  151. 100% { opacity:0; }
  152. }
  153. @keyframes fadeOut {
  154. 0% { opacity:1; }
  155. 100% { opacity:0; }
  156. }
  157. @-webkit-keyframes backSlideOut {
  158. 25% { opacity: .5; -webkit-transform: translateZ(-500px); }
  159. 75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
  160. 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
  161. }
  162. @-moz-keyframes backSlideOut {
  163. 25% { opacity: .5; -moz-transform: translateZ(-500px); }
  164. 75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
  165. 100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
  166. }
  167. @keyframes backSlideOut {
  168. 25% { opacity: .5; transform: translateZ(-500px); }
  169. 75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
  170. 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
  171. }
  172. @-webkit-keyframes backSlideIn {
  173. 0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }
  174. 75% { opacity: .5; -webkit-transform: translateZ(-500px); }
  175. 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
  176. }
  177. @-moz-keyframes backSlideIn {
  178. 0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); }
  179. 75% { opacity: .5; -moz-transform: translateZ(-500px); }
  180. 100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); }
  181. }
  182. @keyframes backSlideIn {
  183. 0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
  184. 75% { opacity: .5; transform: translateZ(-500px); }
  185. 100% { opacity: 1; transform: translateZ(0) translateX(0); }
  186. }
  187. @-webkit-keyframes scaleToFade {
  188. to { opacity: 0; -webkit-transform: scale(.8); }
  189. }
  190. @-moz-keyframes scaleToFade {
  191. to { opacity: 0; -moz-transform: scale(.8); }
  192. }
  193. @keyframes scaleToFade {
  194. to { opacity: 0; transform: scale(.8); }
  195. }
  196. @-webkit-keyframes goDown {
  197. from { -webkit-transform: translateY(-100%); }
  198. }
  199. @-moz-keyframes goDown {
  200. from { -moz-transform: translateY(-100%); }
  201. }
  202. @keyframes goDown {
  203. from { transform: translateY(-100%); }
  204. }
  205. @-webkit-keyframes scaleUpFrom {
  206. from { opacity: 0; -webkit-transform: scale(1.5); }
  207. }
  208. @-moz-keyframes scaleUpFrom {
  209. from { opacity: 0; -moz-transform: scale(1.5); }
  210. }
  211. @keyframes scaleUpFrom {
  212. from { opacity: 0; transform: scale(1.5); }
  213. }
  214. @-webkit-keyframes scaleUpTo {
  215. to { opacity: 0; -webkit-transform: scale(1.5); }
  216. }
  217. @-moz-keyframes scaleUpTo {
  218. to { opacity: 0; -moz-transform: scale(1.5); }
  219. }
  220. @keyframes scaleUpTo {
  221. to { opacity: 0; transform: scale(1.5); }
  222. }