flipInX.css 559 B

12345678910111213141516171819202122232425262728293031
  1. @keyframes flipInX {
  2. from {
  3. transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  4. animation-timing-function: ease-in;
  5. opacity: 0;
  6. }
  7. 40% {
  8. transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  9. animation-timing-function: ease-in;
  10. }
  11. 60% {
  12. transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  13. opacity: 1;
  14. }
  15. 80% {
  16. transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  17. }
  18. to {
  19. transform: perspective(400px);
  20. }
  21. }
  22. .flipInX {
  23. backface-visibility: visible !important;
  24. animation-name: flipInX;
  25. }