.animated {
              animation-duration: 1s;
              animation-fill-mode: both;
            }
            
            .animated.infinite {
              animation-iteration-count: infinite;
            }
            
            .animated.hinge {
              animation-duration: 1s;
            }
            
            @keyframes flipInY {
              from {
                transform: perspective(10000px) rotate3d(0, 1, 0, 90deg);
                animation-timing-function: ease-in;
                opacity: 0;
              }
            
              40% {
                transform: perspective(10000px) rotate3d(0, 1, 0, -20deg);
                animation-timing-function: ease-in;
              }
            
              60% {
                transform: perspective(10000px) rotate3d(0, 1, 0, 10deg);
                opacity: 1;
              }
            
              80% {
                transform: perspective(10000px) rotate3d(0, 1, 0, -5deg);
              }
            
              to {
                transform: perspective(10000px);
              }
            }
            
            .flipInY {
              -webkit-backface-visibility: visible !important;
              backface-visibility: visible !important;
              animation-name: flipInY;
            }
            
            @keyframes flipOutY {
              from {
                transform: perspective(400px);
              }
            
              30% {
                transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
                opacity: 1;
              }
            
              to {
                transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
                opacity: 0;
              }
            }
            
            .flipOutY {
              -webkit-backface-visibility: visible !important;
              backface-visibility: visible !important;
              animation-name: flipOutY;
            }