/* ==================================== ====== ANIMATION ====================== ==================================== */ /* Appear From Center */ @keyframes afc { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } } @-webkit-keyframes afc { from { opacity: 0; -webkit-transform: scale(0.2); } to { opacity: 1; -webkit-transform: scale(1); } } .animate_afc { opacity: 0; } .animate_afc.animate_start { -webkit-animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 afc; animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 afc; opacity: 1; } /* Appear From Left */ @keyframes afl { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } } @-webkit-keyframes afl { from { opacity: 0; -webkit-transform: translateX(-100px); } to { opacity: 1; -webkit-transform: translateX(0); } } .animate_afl { opacity: 0; } .animate_afl.animate_start { -webkit-animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 afl; animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 afl; opacity: 1; } /* Appear From Right */ @keyframes afr { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } @-webkit-keyframes afr { from { opacity: 0; -webkit-transform: translateX(100px); } to { opacity: 1; -webkit-transform: translateX(0); } } .animate_afr { opacity: 0; } .animate_afr.animate_start { -webkit-animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 afr; animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 afr; opacity: 1; } /* Appear From Top */ @keyframes aft { from { opacity: 0; transform: translateY(-100px); } to { opacity: 1; transform: translateY(0); } } @-webkit-keyframes aft { from { opacity: 0; -webkit-transform: translateY(-100px); } to { opacity: 1; -webkit-transform: translateY(0); } } .animate_aft { opacity: 0; } .animate_aft.animate_start { -webkit-animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 aft; animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 aft; opacity: 1; } /* Appear From Bottom */ @keyframes afb { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } @-webkit-keyframes afb { from { opacity: 0; -webkit-transform: translateY(100px); } to { opacity: 1; -webkit-transform: translateY(0); } } .animate_afb { opacity: 0; } .animate_afb.animate_start { -webkit-animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 afb; animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 afb; opacity: 1; } /* Width From Center */ @keyframes wfc { from { opacity: 0; transform: scaleX(0.01); } to { opacity: 1; transform: scaleX(1); } } @-webkit-keyframes wfc { from { opacity: 0; -webkit-transform: scaleX(0.01); } to { opacity: 1; -webkit-transform: scaleX(1); } } .animate_wfc { opacity: 0; } .animate_wfc.animate_start { -webkit-animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 wfc; animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 wfc; opacity: 1; } /* Height From Center */ @keyframes hfc { from { opacity: 0; transform: scaleY(0.01); } to { opacity: 1; transform: scaleY(1); } } @-webkit-keyframes hfc { from { opacity: 0; -webkit-transform: scaleY(0.01); } to { opacity: 1; -webkit-transform: scaleY(1); } } .animate_hfc { opacity: 0; } .animate_hfc.animate_start { -webkit-animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 hfc; animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 hfc; opacity: 1; } /* Rotate From Center */ @keyframes rfc { from { opacity: 0; transform: scale(0.01) rotate(360deg); } to { opacity: 1; transform: scale(1) rotate(0); } } @-webkit-keyframes rfc { from { opacity: 0; -webkit-transform: scale(0.01) rotate(360deg); } to { opacity: 1; -webkit-transform: scale(1) rotate(0); } } .animate_rfc { opacity: 0; } .animate_rfc.animate_start { -webkit-animation: 0.8s ease 0s normal backwards 1 rfc; animation: 0.8s ease 0s normal backwards 1 rfc; opacity: 1; } /* Rotate From Left */ @keyframes rfl { from { opacity: 0; transform: translateX(-100px) rotate(-180deg); } to { opacity: 1; transform: translateX(0) rotate(0); } } @-webkit-keyframes rfl { from { opacity: 0; -webkit-transform: translateX(-100px) rotate(-180deg); } to { opacity: 1; -webkit-transform: translateX(0) rotate(0); } } .animate_rfl { opacity: 0; } .animate_rfl.animate_start { -webkit-animation: 0.8s ease 0s normal backwards 1 rfl; animation: 0.8s ease 0s normal backwards 1 rfl; opacity: 1; } /* Rotate From Right */ @keyframes rfr { from { opacity: 0; transform: translateX(100px) rotate(180deg); } to { opacity: 1; transform: translateX(0) rotate(0); } } @-webkit-keyframes rfr { from { opacity: 0; -webkit-transform: translateX(100px) rotate(180deg); } to { opacity: 1; -webkit-transform: translateX(0) rotate(0); } } .animate_rfr { opacity: 0; } .animate_rfr.animate_start { -webkit-animation: 0.8s ease 0s normal backwards 1 rfr; animation: 0.8s ease 0s normal backwards 1 rfr; opacity: 1; } /* Animation Delays */ .d1.animate_start { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .d2.animate_start { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .d3.animate_start { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .d4.animate_start { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .d5.animate_start { -webkit-animation-delay: 1s; animation-delay: 1s; } /* Remove animation on small screens */ @media only screen and (max-width: 767px) { .animate_afc, .animate_aft, .animate_afb, .animate_afl, .animate_afr, .animate_wfc, .animate_hfc, .animate_rfl, .animate_rfr, .animate_rfc { opacity: 1; -webkit-animation: none !important; animation: none !important; } }