CSS   26

flip-x-fr css

Guest on 12th July 2022 12:41:00 AM

  1. @keyframes flip-in-x-fr {
  2.   0% {
  3.     transform: perspective(1000px) rotateX(90deg);
  4.     opacity: 0;
  5.   }
  6.   100% {
  7.     transform: perspective(1000px) rotateX(0deg);
  8.     opacity: 1;
  9.   }
  10. }
  11.  
  12.  
  13. .flip-in-x-fr {
  14.   animation-name: flip-in-x-fr;
  15.   backface-visibility: visible !important;
  16. }
  17.  
  18.  
  19. @keyframes flip-out-x-fr {
  20.   0% {
  21.     transform: perspective(1000px) rotateX(0deg);
  22.     opacity: 1;
  23.   }
  24.   100% {
  25.     transform: perspective(1000px) rotateX(90deg);
  26.     opacity: 0;
  27.   }
  28. }
  29.  
  30.  
  31. .flip-out-x-fr {
  32.   animation-name: flip-out-x-fr;
  33.   backface-visibility: visible !important;
  34. }

Raw Paste


Login or Register to edit or fork this paste. It's free.