Advertisement
Rengele

Untitled

Jan 11th, 2021
143
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.91 KB | None | 0 0
  1. /* Fade-move Animation For Lightbox - Magnific Popup */
  2. /* at start */
  3. .my-mfp-slide-bottom .zoom-anim-dialog {
  4. opacity: 0;
  5. transition: all 0.2s ease-out;
  6. -webkit-transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
  7. -ms-transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
  8. transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
  9. }
  10.  
  11. /* animate in */
  12. .my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
  13. opacity: 1;
  14. -webkit-transform: translateY(0) perspective(37.5rem) rotateX(0);
  15. -ms-transform: translateY(0) perspective(37.5rem) rotateX(0);
  16. transform: translateY(0) perspective(37.5rem) rotateX(0);
  17. }
  18.  
  19. /* animate out */
  20. .my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
  21. opacity: 0;
  22. -webkit-transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg);
  23. -ms-transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg);
  24. transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg);
  25. }
  26.  
  27. /* dark overlay, start state */
  28. .my-mfp-slide-bottom.mfp-bg {
  29. opacity: 0;
  30. transition: opacity 0.2s ease-out;
  31. }
  32.  
  33. /* animate in */
  34. .my-mfp-slide-bottom.mfp-ready.mfp-bg {
  35. opacity: 0.8;
  36. }
  37. /* animate out */
  38. .my-mfp-slide-bottom.mfp-removing.mfp-bg {
  39. opacity: 0;
  40. }
  41. /* end of fade-move animation for lightbox - magnific popup */
  42.  
  43. /* Fade Animation For Image Slider - Magnific Popup */
  44. @-webkit-keyframes fadeIn {
  45. from {
  46. opacity: 0;
  47. }
  48. to {
  49. opacity: 1;
  50. }
  51. }
  52.  
  53. @keyframes fadeIn {
  54. from {
  55. opacity: 0;
  56. }
  57. to {
  58. opacity: 1;
  59. }
  60. }
  61.  
  62. .fadeIn {
  63. -webkit-animation: fadeIn 0.6s;
  64. animation: fadeIn 0.6s;
  65. }
  66.  
  67. @-webkit-keyframes fadeOut {
  68. from {
  69. opacity: 1;
  70. }
  71. to {
  72. opacity: 0;
  73. }
  74. }
  75.  
  76. @keyframes fadeOut {
  77. from {
  78. opacity: 1;
  79. }
  80. to {
  81. opacity: 0;
  82. }
  83. }
  84.  
  85. .fadeOut {
  86. -webkit-animation: fadeOut 0.8s;
  87. animation: fadeOut 0.8s;
  88. }
  89. /* end of fade animation for image slider - magnific popup */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement