­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ /* * Animation */ .animate_start { animation-duration: 0.7s; animation-fill-mode: both; transition-timing-function: cubic-bezier(.78,.13,.15,.86); } .animate_off_autostart { visibility: hidden; } /* Fade */ .animate_fade { opacity: 0; } .animate_fade.animate_start { animation-name: fadeIn; opacity: 1; } /* Appear From Center */ @keyframes afc { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } } .animate_afc { opacity: 0; } .animate_afc.animate_start { animation-name: afc; opacity: 1; } /* Appear From Left */ @keyframes afl { from { opacity: 0; transform: translateX(-3rem); } to { opacity: 1; transform: translateX(0); } } .animate_afl { opacity: 0; } .animate_afl.animate_start { animation-name: afl; opacity: 1; } /* Appear From Right */ @keyframes afr { from { opacity: 0; transform: translateX(3rem); } to { opacity: 1; transform: translateX(0); } } .animate_afr { opacity: 0; } .animate_afr.animate_start { animation-name: afr; opacity: 1; } /* Appear From Top */ @keyframes aft { from { opacity: 0; transform: translateY(-3rem); } to { opacity: 1; transform: translateY(0); } } .animate_aft { opacity: 0; } .animate_aft.animate_start { animation-name: aft; opacity: 1; } /* Appear From Bottom */ @keyframes afb { from { opacity: 0; transform: translateY(3rem); } to { opacity: 1; transform: translateY(0); } } .animate_afb { opacity: 0; } .animate_afb.animate_start { animation-name: afb; opacity: 1; } /* Width Stretch */ @keyframes wfc { from { opacity: 0; transform: scaleX(0.01); } to { opacity: 1; transform: scaleX(1); } } .animate_wfc { opacity: 0; transform-origin: 0 0; } .animate_wfc.animate_start { animation-name: wfc; opacity: 1; } /* Height Stretch */ @keyframes hfc { from { opacity: 0; transform: scaleY(0.01); } to { opacity: 1; transform: scaleY(1); } } .animate_hfc { opacity: 0; transform-origin: 0 0; } .animate_hfc.animate_start { animation-name: hfc; opacity: 1; } /* Disable effects */ .disable_effects .animate_fade, .disable_effects .animate_afc, .disable_effects .animate_aft, .disable_effects .animate_afb, .disable_effects .animate_afl, .disable_effects .animate_afr, .disable_effects .animate_wfc, .disable_effects .animate_hfc, .vc_editor.compose-mode .animate_fade, .vc_editor.compose-mode .animate_afc, .vc_editor.compose-mode .animate_aft, .vc_editor.compose-mode .animate_afb, .vc_editor.compose-mode .animate_afl, .vc_editor.compose-mode .animate_afr, .vc_editor.compose-mode .animate_wfc, .vc_editor.compose-mode .animate_hfc { opacity: 1; animation: none !important; } /* Animations migrated from CodeLights */ .animated_bounceIn, .animated_fadeIn, .animated_fadeOut, .animated_zoomIn { animation-duration: 1s; animation-fill-mode: both; } .animated_bounceIn { animation-duration: .75s; } /* bounceIn */ @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; transform: scale3d(1, 1, 1); } } .animated_bounceIn { animation-name: bounceIn; } /* fadeIn */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animated_fadeIn { animation-name: fadeIn; } /* fadeOut */ @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .animated_fadeOut { animation-name: fadeOut; } /* zoomIn */ .animated_zoomIn { animation-name: afc; }