API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 18th, 2016
140
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.70 KB | None | 0 0
raw download clone embed print report
  1. /* Icon Hang */
  2. @-webkit-keyframes hvr-icon-hang {
  3. 0% {
  4. -webkit-transform: translateY(6px);
  5. transform: translateY(6px);
  6. }
  7. 50% {
  8. -webkit-transform: translateY(2px);
  9. transform: translateY(2px);
  10. }
  11. 100% {
  12. -webkit-transform: translateY(6px);
  13. transform: translateY(6px);
  14. }
  15. }
  16. @keyframes hvr-icon-hang {
  17. 0% {
  18. -webkit-transform: translateY(6px);
  19. transform: translateY(6px);
  20. }
  21. 50% {
  22. -webkit-transform: translateY(2px);
  23. transform: translateY(2px);
  24. }
  25. 100% {
  26. -webkit-transform: translateY(6px);
  27. transform: translateY(6px);
  28. }
  29. }
  30. @-webkit-keyframes hvr-icon-hang-sink {
  31. 100% {
  32. -webkit-transform: translateY(6px);
  33. transform: translateY(6px);
  34. }
  35. }
  36. @keyframes hvr-icon-hang-sink {
  37. 100% {
  38. -webkit-transform: translateY(6px);
  39. transform: translateY(6px);
  40. }
  41. }
  42. .hvr-icon-hang {
  43. display: inline-block;
  44. vertical-align: middle;
  45. -webkit-transform: perspective(1px) translateZ(0);
  46. transform: perspective(1px) translateZ(0);
  47. box-shadow: 0 0 1px transparent;
  48. position: relative;
  49. padding-right: 2.2em;
  50. -webkit-transition-duration: 0.3s;
  51. transition-duration: 0.3s;
  52. }
  53. .hvr-icon-hang:before {
  54. content: "\f078";
  55. position: absolute;
  56. right: 1em;
  57. padding: 0 1px;
  58. font-family: FontAwesome;
  59. -webkit-transform: translateZ(0);
  60. transform: translateZ(0);
  61. }
  62. .hvr-icon-hang:hover:before, .hvr-icon-hang:focus:before, .hvr-icon-hang:active:before {
  63. -webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang;
  64. animation-name: hvr-icon-hang-sink, hvr-icon-hang;
  65. -webkit-animation-duration: .3s, 1.5s;
  66. animation-duration: .3s, 1.5s;
  67. -webkit-animation-delay: 0s, .3s;
  68. animation-delay: 0s, .3s;
  69. -webkit-animation-timing-function: ease-out, ease-in-out;
  70. animation-timing-function: ease-out, ease-in-out;
  71. -webkit-animation-iteration-count: 1, infinite;
  72. animation-iteration-count: 1, infinite;
  73. -webkit-animation-fill-mode: forwards;
  74. animation-fill-mode: forwards;
  75. -webkit-animation-direction: normal, alternate;
  76. animation-direction: normal, alternate;
  77. }
  78.  
  79.  
  80. /*==================================================================================================
  81. ==================================================================================================*/
  82.  
  83.  
  84.  
  85. /* Style for the buttons that require the underline from the left */
  86.  
  87. .button-hover-load {
  88. display: inline-block;
  89. vertical-align: middle;
  90. -webkit-transform: perspective(1px) translateZ(0);
  91. transform: perspective(1px) translateZ(0);
  92. box-shadow: 0 0 1px transparent;
  93. position: relative;
  94. overflow: hidden;
  95. }
  96.  
  97. .button-hover-load:before {
  98. content: "";
  99. position: absolute;
  100. z-index: -1;
  101. left: 0;
  102. right: 100%;
  103. bottom: 0;
  104. background: #2098D1;
  105. height: 4px;
  106. -webkit-transition-property: right;
  107. transition-property: right;
  108. -webkit-transition-duration: 0.3s;
  109. transition-duration: 0.3s;
  110. -webkit-transition-timing-function: ease-out;
  111. transition-timing-function: ease-out;
  112. }
  113.  
  114. .hbutton-hover-load:hover:before, .button-hover-load:focus:before, .button-hover-load:active:before {
  115. right: 0;
  116. }
  117.  
  118.  
  119. /*==================================================================================================
  120. ==================================================================================================*/
  121.  
  122.  
  123.  
  124. /* Bounce to top effect on hover Colour #1 */
  125.  
  126. .hvr-bounce-to-top1 {
  127. display: inline-block;
  128. vertical-align: middle;
  129. -webkit-transform: perspective(1px) translateZ(0);
  130. transform: perspective(1px) translateZ(0);
  131. box-shadow: 0 0 1px transparent;
  132. position: relative;
  133. -webkit-transition-property: color;
  134. transition-property: color;
  135. -webkit-transition-duration: 0.5s;
  136. transition-duration: 0.5s;
  137. }
  138.  
  139. .hvr-bounce-to-top1:before {
  140. content: "";
  141. position: absolute;
  142. z-index: -1;
  143. top: 0;
  144. left: 0;
  145. right: 0;
  146. bottom: 0;
  147. background: #00AA88;
  148. -webkit-transform: scaleY(0);
  149. transform: scaleY(0);
  150. -webkit-transform-origin: 50% 100%;
  151. transform-origin: 50% 100%;
  152. -webkit-transition-property: transform;
  153. transition-property: transform;
  154. -webkit-transition-duration: 0.5s;
  155. transition-duration: 0.5s;
  156. -webkit-transition-timing-function: ease-out;
  157. transition-timing-function: ease-out;
  158. }
  159.  
  160. .hvr-bounce-to-top1:hover, .hvr-bounce-to-top1:focus, .hvr-bounce-to-top1:active {
  161. color: white;
  162. }
  163.  
  164. .hvr-bounce-to-top1:hover:before, .hvr-bounce-to-top1:focus:before, .hvr-bounce-to-top1:active:before {
  165. -webkit-transform: scaleY(1);
  166. transform: scaleY(1);
  167. -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  168. transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  169. }
  170.  
  171. /* Bounce to top effect on hover Colour #2 */
  172.  
  173. .hvr-bounce-to-top2 {
  174. display: inline-block;
  175. vertical-align: middle;
  176. -webkit-transform: perspective(1px) translateZ(0);
  177. transform: perspective(1px) translateZ(0);
  178. box-shadow: 0 0 1px transparent;
  179. position: relative;
  180. -webkit-transition-property: color;
  181. transition-property: color;
  182. -webkit-transition-duration: 0.5s;
  183. transition-duration: 0.5s;
  184. }
  185.  
  186. .hvr-bounce-to-top2:before {
  187. content: "";
  188. position: absolute;
  189. z-index: -1;
  190. top: 0;
  191. left: 0;
  192. right: 0;
  193. bottom: 0;
  194. background: #216778;
  195. -webkit-transform: scaleY(0);
  196. transform: scaleY(0);
  197. -webkit-transform-origin: 50% 100%;
  198. transform-origin: 50% 100%;
  199. -webkit-transition-property: transform;
  200. transition-property: transform;
  201. -webkit-transition-duration: 0.5s;
  202. transition-duration: 0.5s;
  203. -webkit-transition-timing-function: ease-out;
  204. transition-timing-function: ease-out;
  205. }
  206.  
  207. .hvr-bounce-to-top2:hover, .hvr-bounce-to-top2:focus, .hvr-bounce-to-top2:active {
  208. color: white;
  209. }
  210.  
  211. .hvr-bounce-to-top2:hover:before, .hvr-bounce-to-top2:focus:before, .hvr-bounce-to-top2:active:before {
  212. -webkit-transform: scaleY(1);
  213. transform: scaleY(1);
  214. -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  215. transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  216. }
  217.  
  218. /* Bounce to top effect on hover Colour #3 */
  219.  
  220. .hvr-bounce-to-top3 {
  221. display: inline-block;
  222. vertical-align: middle;
  223. -webkit-transform: perspective(1px) translateZ(0);
  224. transform: perspective(1px) translateZ(0);
  225. box-shadow: 0 0 1px transparent;
  226. position: relative;
  227. -webkit-transition-property: color;
  228. transition-property: color;
  229. -webkit-transition-duration: 0.5s;
  230. transition-duration: 0.5s;
  231. }
  232.  
  233. .hvr-bounce-to-top3:before {
  234. content: "";
  235. position: absolute;
  236. z-index: -1;
  237. top: 0;
  238. left: 0;
  239. right: 0;
  240. bottom: 0;
  241. background: #A0892C;
  242. -webkit-transform: scaleY(0);
  243. transform: scaleY(0);
  244. -webkit-transform-origin: 50% 100%;
  245. transform-origin: 50% 100%;
  246. -webkit-transition-property: transform;
  247. transition-property: transform;
  248. -webkit-transition-duration: 0.5s;
  249. transition-duration: 0.5s;
  250. -webkit-transition-timing-function: ease-out;
  251. transition-timing-function: ease-out;
  252. }
  253.  
  254. .hvr-bounce-to-top3:hover, .hvr-bounce-to-top3:focus, .hvr-bounce-to-top3:active {
  255. color: white;
  256. }
  257.  
  258. .hvr-bounce-to-top3:hover:before, .hvr-bounce-to-top3:focus:before, .hvr-bounce-to-top3:active:before {
  259. -webkit-transform: scaleY(1);
  260. transform: scaleY(1);
  261. -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  262. transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  263. }
  264.  
  265.  
  266.  
  267. /*==================================================================================================
  268. ==================================================================================================*/
  269.  
  270.  
  271.  
  272. /* Bounce To Right Colour #1*/
  273. .hvr-bounce-to-right1 {
  274. display: inline-block;
  275. vertical-align: middle;
  276. -webkit-transform: perspective(1px) translateZ(0);
  277. transform: perspective(1px) translateZ(0);
  278. box-shadow: 0 0 1px transparent;
  279. position: relative;
  280. -webkit-transition-property: color;
  281. transition-property: color;
  282. -webkit-transition-duration: 0.5s;
  283. transition-duration: 0.5s;
  284. }
  285. .hvr-bounce-to-right1:before {
  286. content: "";
  287. position: absolute;
  288. z-index: -1;
  289. top: 0;
  290. left: 0;
  291. right: 0;
  292. bottom: 0;
  293. background: #00AA88;
  294. -webkit-transform: scaleX(0);
  295. transform: scaleX(0);
  296. -webkit-transform-origin: 0 50%;
  297. transform-origin: 0 50%;
  298. -webkit-transition-property: transform;
  299. transition-property: transform;
  300. -webkit-transition-duration: 0.5s;
  301. transition-duration: 0.5s;
  302. -webkit-transition-timing-function: ease-out;
  303. transition-timing-function: ease-out;
  304. }
  305. .hvr-bounce-to-right1:hover, .hvr-bounce-to-right1:focus, .hvr-bounce-to-right1:active {
  306. color: white;
  307. }
  308. .hvr-bounce-to-right1:hover:before, .hvr-bounce-to-right1:focus:before, .hvr-bounce-to-right1:active:before {
  309. -webkit-transform: scaleX(1);
  310. transform: scaleX(1);
  311. -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  312. transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  313. }
  314.  
  315.  
  316. /* Bounce To Right Colour #2*/
  317. .hvr-bounce-to-right2 {
  318. display: inline-block;
  319. vertical-align: middle;
  320. -webkit-transform: perspective(1px) translateZ(0);
  321. transform: perspective(1px) translateZ(0);
  322. box-shadow: 0 0 1px transparent;
  323. position: relative;
  324. -webkit-transition-property: color;
  325. transition-property: color;
  326. -webkit-transition-duration: 0.5s;
  327. transition-duration: 0.5s;
  328. }
  329. .hvr-bounce-to-right2:before {
  330. content: "";
  331. position: absolute;
  332. z-index: -1;
  333. top: 0;
  334. left: 0;
  335. right: 0;
  336. bottom: 0;
  337. background: #216778;
  338. -webkit-transform: scaleX(0);
  339. transform: scaleX(0);
  340. -webkit-transform-origin: 0 50%;
  341. transform-origin: 0 50%;
  342. -webkit-transition-property: transform;
  343. transition-property: transform;
  344. -webkit-transition-duration: 0.5s;
  345. transition-duration: 0.5s;
  346. -webkit-transition-timing-function: ease-out;
  347. transition-timing-function: ease-out;
  348. }
  349. .hvr-bounce-to-right2:hover, .hvr-bounce-to-right2:focus, .hvr-bounce-to-right2:active {
  350. color: white;
  351. }
  352. .hvr-bounce-to-right2:hover:before, .hvr-bounce-to-right2:focus:before, .hvr-bounce-to-right2:active:before {
  353. -webkit-transform: scaleX(1);
  354. transform: scaleX(1);
  355. -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  356. transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  357. }
  358.  
  359.  
  360. /* Bounce To Right Colour #3*/
  361. .hvr-bounce-to-right3 {
  362. display: inline-block;
  363. vertical-align: middle;
  364. -webkit-transform: perspective(1px) translateZ(0);
  365. transform: perspective(1px) translateZ(0);
  366. box-shadow: 0 0 1px transparent;
  367. position: relative;
  368. -webkit-transition-property: color;
  369. transition-property: color;
  370. -webkit-transition-duration: 0.5s;
  371. transition-duration: 0.5s;
  372. }
  373. .hvr-bounce-to-right3:before {
  374. content: "";
  375. position: absolute;
  376. z-index: -1;
  377. top: 0;
  378. left: 0;
  379. right: 0;
  380. bottom: 0;
  381. background: #A0892C;
  382. -webkit-transform: scaleX(0);
  383. transform: scaleX(0);
  384. -webkit-transform-origin: 0 50%;
  385. transform-origin: 0 50%;
  386. -webkit-transition-property: transform;
  387. transition-property: transform;
  388. -webkit-transition-duration: 0.5s;
  389. transition-duration: 0.5s;
  390. -webkit-transition-timing-function: ease-out;
  391. transition-timing-function: ease-out;
  392. }
  393. .hvr-bounce-to-right3:hover, .hvr-bounce-to-right3:focus, .hvr-bounce-to-right3:active {
  394. color: white;
  395. }
  396. .hvr-bounce-to-right3:hover:before, .hvr-bounce-to-right3:focus:before, .hvr-bounce-to-right3:active:before {
  397. -webkit-transform: scaleX(1);
  398. transform: scaleX(1);
  399. -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  400. transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  401. }
  402.  
  403.  
  404.  
  405. /*==================================================================================================
  406. ==================================================================================================*/
  407.  
  408.  
  409.  
  410. /* Icon Grow */
  411. .hvr-icon-grow {
  412. display: inline-block;
  413. vertical-align: middle;
  414. -webkit-transform: perspective(1px) translateZ(0);
  415. transform: perspective(1px) translateZ(0);
  416. box-shadow: 0 0 1px transparent;
  417. position: relative;
  418. padding-right: 2.2em;
  419. -webkit-transition-duration: 0.3s;
  420. transition-duration: 0.3s;
  421. }
  422. .hvr-icon-grow:before {
  423. content: "\f015";
  424. position: absolute;
  425. right: 1em;
  426. padding: 0 1px;
  427. font-family: FontAwesome;
  428. -webkit-transform: translateZ(0);
  429. transform: translateZ(0);
  430. -webkit-transition-duration: 0.3s;
  431. transition-duration: 0.3s;
  432. -webkit-transition-property: transform;
  433. transition-property: transform;
  434. -webkit-transition-timing-function: ease-out;
  435. transition-timing-function: ease-out;
  436. }
  437. .hvr-icon-grow:hover:before, .hvr-icon-grow:focus:before, .hvr-icon-grow:active:before {
  438. -webkit-transform: scale(1.3) translateZ(0);
  439. transform: scale(1.3) translateZ(0);
  440. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!