.ani_duration_0250 { animation-duration: 0.25s; } .ani_duration_0500 { animation-duration: 0.5s; } .ani_duration_0750 { animation-duration: 0.75s; } .ani_duration_1000 { animation-duration: 1s; } .ani_duration_1500 { animation-duration: 1.5s; } .ani_duration_2000 { animation-duration: 2s; } .ani_duration_2500 { animation-duration: 2.5s; } .ani_duration_3000 { animation-duration: 3s; } .ani_duration_3500 { animation-duration: 3.5s; } .ani_duration_4000 { animation-duration: 4s; } .ani_duration_4500 { animation-duration: 4.5s; } .ani_duration_5000 { animation-duration: 5s; } .ani_duration_5500 { animation-duration: 5.5s; } .ani_duration_6000 { animation-duration: 6s; } .ani_duration_6500 { animation-duration: 6.5s; } .ani_duration_7000 { animation-duration: 7s; } .ani_duration_7500 { animation-duration: 7.5s; } .ani_duration_8000 { animation-duration: 8s; } .ani_duration_8500 { animation-duration: 8.5s; } .ani_duration_9000 { animation-duration: 9s; } .ani_duration_9500 { animation-duration: 9.5s; } .ani_duration_10000 { animation-duration: 10s; } .ani_duration_20000 { animation-duration: 20s; } .ani_duration_40000 { animation-duration: 40s; } .ani_duration_60000 { animation-duration: 60s; } .ani_delay_0250 { animation-delay: 0.25s; } .ani_delay_0500 { animation-delay: 0.5s; } .ani_delay_0750 { animation-delay: 0.75s; } .ani_delay_1000 { animation-delay: 1s; } .ani_delay_1500 { animation-delay: 1.5s; } .ani_delay_2000 { animation-delay: 2s; } .ani_delay_2500 { animation-delay: 2.5s; } .ani_delay_3000 { animation-delay: 3s; } .ani_delay_3500 { animation-delay: 3.5s; } .ani_delay_4000 { animation-delay: 4s; } .ani_delay_4500 { animation-delay: 4.5s; } .ani_delay_5000 { animation-delay: 5s; } .ani_delay_5500 { animation-delay: 5.5s; } .ani_delay_6000 { animation-delay: 6s; } .ani_delay_6500 { animation-delay: 6.5s; } .ani_delay_7000 { animation-delay: 7s; } .ani_delay_7500 { animation-delay: 7.5s; } .ani_delay_8000 { animation-delay: 8s; } .ani_delay_8500 { animation-delay: 8.5s; } .ani_delay_9000 { animation-delay: 9s; } .ani_delay_9500 { animation-delay: 9.5s; } .ani_delay_10000 { animation-delay: 10s; } .reverse { animation-delay: 0s; } .ani_timing_linear { animation-timing-function: linear; } .ani_timing_ease { animation-timing-function: ease; } .ani_timing_ease_in { animation-timing-function: ease-in; } .ani_timing_ease_out { animation-timing-function: ease-out; } .ani_timing_ease_in_out { animation-timing-function: ease-in-out; } /* ------------------------------------------------------------ */ /* ------------------------------------------------------------ */ /* FADE INS */ .fade-in { opacity: 0; animation-fill-mode: forwards; } .fade-in.run { animation-name: fade-in; } .fade-in.reverse { opacity: 1; animation-name: fade-out; } @keyframes fade-in { 0% { opacity: 0; display: none; } 1% { opacity: 0; display: block; } 100% { opacity: 1; display: block; } } .fade-out { opacity: 1; animation-fill-mode: forwards; } .fade-out.run { animation-name: fade-out; } .fade-out.reverse { opacity: 0; animation-name: fade-in; } @keyframes fade-out { 0% { opacity: 1; display: block; } 99% { opacity: 0; display: block; } 100% { opacity: 0; display: none; } } /* ------------------------------------------------------------ */ /* ------------------------------------------------------------ */ /* SLIDE INS */ .slide-in-from-top { transform: translateY(-100%); animation-fill-mode: forwards; } .slide-in-from-top.run { animation-name: slide-in-from-top; } .slide-in-from-top.reverse { transform: translateY(0%); animation-name: slide-out-to-top; } .slide-out-to-top { transform: translateY(0%); animation-fill-mode: forwards; } .slide-out-to-top.run { animation-name: slide-out-to-top; } .slide-out-to-top.reverse { transform: translateY(-100%); animation-name: slide-in-from-top; } @keyframes slide-in-from-top { 0% { transform: translateY(-100%); } 100% { transform: translateY(0px); } } @keyframes slide-out-to-top { 0% { transform: translateY(0px); } 100% { transform: translateY(-100%); } } .slide-in-from-left { transform: translateX(-110%); animation-fill-mode: forwards; } .slide-in-from-left.run { animation-name: slide-in-from-left; } .slide-in-from-left.reverse { transform: translateX(0%); animation-name: slide-out-to-left; } @keyframes slide-in-from-left { 0% { transform: translateX(-110%); } 100% { transform: translateX(0%); } } .slide-out-to-left { transform: translateX(0%); animation-fill-mode: forwards; } .slide-out-to-left.run { animation-name: slide-out-to-left; } .slide-out-to-left.reverse { transform: translateX(-110%); animation-name: slide-in-from-left; } @keyframes slide-out-to-left { 0% { transform: translateX(0px); } 100% { transform: translateX(-110%); } } .slide-in-from-right { transform: translateX(110%); animation-fill-mode: forwards; } .slide-in-from-right.run { animation-name: slide-in-from-right; } .slide-in-from-right.reverse { transform: translateX(0px); animation-name: slide-out-to-right; } @keyframes slide-in-from-right { 0% { transform: translateX(110%); } 100% { transform: translateX(0px); } } .slide-out-to-right { transform: translateX(0px); animation-fill-mode: forwards; } .slide-out-to-right.run { animation-name: slide-out-to-right; } .slide-out-to-right.reverse { transform: translateX(110%); animation-name: slide-in-from-right; } @keyframes slide-out-to-right { 0% { transform: translateX(0px); } 100% { transform: translateX(110%); } } .slide-in-from-bottom { transform: translateY(110%); animation-fill-mode: forwards; } .slide-in-from-bottom.run { animation-name: slide-in-from-bottom; } .slide-in-from-bottom.reverse { transform: translateY(0%); animation-name: slide-out-to-bottom; } .slide-out-to-bottom { transform: translateY(0%); animation-fill-mode: forwards; } .slide-out-to-bottom.run { animation-name: slide-out-to-bottom; } .slide-out-to-bottom.reverse { transform: translateY(110%); animation-name: slide-in-from-bottom; } @keyframes slide-in-from-bottom { 0% { transform: translateY(110%); } 100% { transform: translateY(0%); } } @keyframes slide-out-to-bottom { 0% { transform: translateY(0%); } 100% { transform: translateY(110%); } } /* ------------------------------------------------------------ */ /* ------------------------------------------------------------ */ /* SLIDE AND FADE INS */ .slide-fade-in-from-top { opacity: 0; transform: translateY(-100%); animation-fill-mode: forwards; } .slide-fade-in-from-top.run { animation-name: slide-fade-in-from-top; } .slide-fade-in-from-top.reverse { opacity: 1; transform: translateY(0%); animation-name: slide-fade-out-to-top; } .slide-fade-out-to-top { opacity: 1; transform: translateY(0%); animation-fill-mode: forwards; } .slide-fade-out-to-top.run { animation-name: slide-fade-out-to-top; } .slide-fade-out-to-top.reverse { opacity: 0; transform: translateY(-100%); animation-name: slide-fade-in-from-top; } @keyframes slide-fade-in-from-top { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0%); } } @keyframes slide-fade-out-to-top { 0% { opacity: 1; transform: translateY(0%); } 100% { opacity: 0; transform: translateY(-100%); } } .slide-fade-in-from-left { opacity: 0; transform: translateX(-100%); animation-fill-mode: forwards; } .slide-fade-in-from-left.run { animation-name: slide-fade-in-from-left; } .slide-fade-in-from-left.reverse { animation-name: slide-fade-out-to-left; } .slide-fade-out-to-left { opacity: 1; transform: translateX(0%); animation-fill-mode: forwards; } .slide-fade-out-to-left.run { animation-name: slide-fade-out-to-left; } .slide-fade-out-to-left.reverse { opacity: 0; transform: translateX(-100%); animation-name: slide-fade-in-from-left; } @keyframes slide-fade-in-from-left { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0px); } } @keyframes slide-fade-out-to-left { 0% { opacity: 1; transform: translateX(0%); } 100% { opacity: 0; transform: translateX(-100%); } } .slide-fade-in-from-right { opacity: 0; transform: translateX(100%); animation-fill-mode: forwards; } .slide-fade-in-from-right.run { animation-name: slide-fade-in-from-right; } .slide-fade-in-from-right.reverse { opacity: 1; transform: translateX(0px); animation-name: slide-fade-out-to-right; } .slide-fade-out-to-right { opacity: 1; transform: translateX(0%); animation-fill-mode: forwards; } .slide-fade-out-to-right.run { animation-name: slide-fade-out-to-right; } .slide-fade-out-to-right.reverse { opacity: 0; transform: translateX(100%); animation-name: slide-fade-in-from-right; } @keyframes slide-fade-in-from-right { 0% { opacity: 0; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(0%); } } @keyframes slide-fade-out-to-right { 0% { opacity: 1; transform: translateX(0%); } 100% { opacity: 0; transform: translateX(100%); } } .slide-fade-in-from-bottom { opacity: 0; transform: translateY(100%); animation-fill-mode: forwards; } .slide-fade-in-from-bottom.run { animation-name: slide-fade-in-from-bottom; } .slide-fade-in-from-bottom.reverse { opacity: 1; transform: translateY(0%); animation-name: slide-fade-out-to-bottom; } .slide-fade-out-to-bottom { opacity: 1; transform: translateY(0%); animation-fill-mode: forwards; } .slide-fade-out-to-bottom.run { animation-name: slide-fade-out-to-bottom; } .slide-fade-out-to-bottom.reverse { opacity: 0; transform: translateY(100%); animation-name: slide-fade-in-from-bottom; } @keyframes slide-fade-in-from-bottom { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 1; transform: translateY(0%); } } @keyframes slide-fade-out-to-bottom { 0% { opacity: 1; transform: translateY(0%); } 100% { opacity: 0; transform: translateY(100%); } } /* ------------------------------------------------------------ */ /* ------------------------------------------------------------ */ /* ROTATE INS */ .rotate-in-from-90deg { transform: rotateZ(90deg); animation-fill-mode: forwards; } .rotate-in-from-90deg.run { animation-name: rotate-in-from-90deg; } .rotate-in-from-90deg.reverse { transform: rotateZ(0deg); animation-name: rotate-out-to-90deg; } .rotate-out-to-90deg { transform: rotateZ(0deg); animation-fill-mode: forwards; } .rotate-out-to-90deg.run { animation-name: rotate-out-to-90deg; } .rotate-out-to-90deg.reverse { transform: rotateZ(90deg); animation-name: rotate-in-from-90deg; } @keyframes rotate-in-from-90deg { 0% { transform: rotateZ(90deg); } 100% { transform: rotateZ(0deg); } } @keyframes rotate-out-to-90deg { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(90deg); } } .rotate-in-from-minus-90deg { transform: rotateZ(-90deg); animation-fill-mode: forwards; } .rotate-in-from-minus-90deg.run { animation-name: rotate-in-from-minus-90deg; } .rotate-in-from-minus-90deg.reverse { transform: rotateZ(0deg); animation-name: rotate-out-to-minus-90deg; } .rotate-out-to-minus-90deg { transform: rotateZ(0deg); animation-fill-mode: forwards; } .rotate-out-to-minus-90deg.run { animation-name: rotate-out-to-minus-90deg; } .rotate-out-to-minus-90deg.reverse { transform: rotateZ(-90deg); animation-name: rotate-in-from-minus-90deg; } @keyframes rotate-in-from-minus-90deg { 0% { transform: rotateZ(-90deg); } 100% { transform: rotateZ(0deg); } } @keyframes rotate-out-to-minus-90deg { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(-90deg); } } /* ------------------------------------------------------------ */ /* ------------------------------------------------------------ */ /* FLIP ROUND */ .flip-round-clockwise { transform: rotateY(0deg); animation-fill-mode: forwards; } .flip-round-clockwise.run { animation-name: flip-round-clockwise; } .flip-round-clockwise.reverse { transform: rotateY(180deg); animation-name: flip-round-clockwise-reverse; } .flip-round-anticlockwise { transform: rotateY(0deg); animation-fill-mode: forwards; } .flip-round-anticlockwise.run { animation-name: flip-round-anticlockwise; } .flip-round-anticlockwise.reverse { transform: rotateY(-180deg); animation-name: flip-round-anticlockwise-reverse; } @keyframes flip-round-clockwise { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(180deg); } } @keyframes flip-round-clockwise-reverse { 0% { transform: rotateY(180deg); } 100% { transform: rotateY(0deg); } } @keyframes flip-round-anticlockwise { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-180deg); } } @keyframes flip-round-anticlockwise-reverse { 0% { transform: rotateY(-180deg); } 100% { transform: rotateY(0deg); } } /* ------------------------------------------------------------ */ /* ------------------------------------------------------------ */ /* ZOOM INs */ .zoom-in-from-50percent { scale: 0.5; animation-fill-mode: forwards; } .zoom-in-from-50percent.run { animation-name: zoom-in-from-50percent; } .zoom-in-from-50percent.reverse { scale: 1; animation-name: zoom-out-to-50percent; } .zoom-out-to-50percent { scale: 1; animation-fill-mode: forwards; } .zoom-out-to-50percent.run { animation-name: zoom-out-to-50percent; } .zoom-out-to-50percent.reverse { scale: 0.5; animation-name: zoom-in-from-50percent; } @keyframes zoom-in-from-50percent { 0% { scale: 0.5; } 100% { scale: 1; } } @keyframes zoom-out-to-50percent { 0% { scale: 1; } 100% { scale: 0.5; } } .zoom-in-to-120percent { scale: 1; animation-fill-mode: forwards; } .zoom-in-to-120percent.run { animation-name: zoom-in-to-120percent; } .zoom-in-to-120percent.reverse { scale: 1.2; animation-name: zoom-out-from-120percent; } @keyframes zoom-in-to-120percent { 0% { scale: 1; } 100% { scale: 1.2; } } @keyframes zoom-out-from-120percent { 0% { scale: 1.2; } 100% { scale: 1; } }