/* * animation focus-in-blur */ .focus-in-blur { -webkit-animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; } @-webkit-keyframes focus-in-blur { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes focus-in-blur { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } /* * animation fade-in */ .fade-in { -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* * animation fade-in */ .loop-color { -webkit-animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both; animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both; } @-webkit-keyframes loop-color { 0% { background-color: #f4b223; } 50% { background-color: #ba8b29; } 100% { background-color: #f4b223; } } @keyframes loop-color { 0% { background-color: #f4b223; } 50% { background-color: #ba8b29; } 100% { background-color: #f4b223; } } /* * animation fade-in-left */ .fade-in-left { -webkit-animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; } @-webkit-keyframes fade-in-left { 0% { -webkit-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-left { 0% { -webkit-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } /* * animation swing-in-top-fwd */ .swing-in-top-fwd { -webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; } @-webkit-keyframes swing-in-top-fwd { 0% { -webkit-transform: rotateX(-100deg); transform: rotateX(-100deg); -webkit-transform-origin: top; transform-origin: top; opacity: 0; } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1; } } @keyframes swing-in-top-fwd { 0% { -webkit-transform: rotateX(-100deg); transform: rotateX(-100deg); -webkit-transform-origin: top; transform-origin: top; opacity: 0; } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1; } }