دیتالایف انجین فارسی

#loading-layer

/* ==================== AJAX LOADING - KOOKDESIGN.IR */ @-webkit-keyframes loading-layer-top { 2.5% { background: #ff8866; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 13.75% { background: #ff430d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 13.76% { background: #ffae0d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { background: #ffcc66; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 27.5% { background: #ffcc66; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 41.25% { background: #ffae0d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 41.26% { background: #2cc642; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { background: #66dd77; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 52.5% { background: #66dd77; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 63.75% { background: #2cc642; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 63.76% { background: #1386d2; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 75% { background: #44aaee; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 77.5% { background: #44aaee; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 91.25% { background: #1386d2; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 91.26% { background: #ff430d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { background: #ff8866; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @-moz-keyframes loading-layer-top { 2.5% { background: #ff8866; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 13.75% { background: #ff430d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 13.76% { background: #ffae0d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { background: #ffcc66; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 27.5% { background: #ffcc66; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 41.25% { background: #ffae0d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 41.26% { background: #2cc642; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { background: #66dd77; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 52.5% { background: #66dd77; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 63.75% { background: #2cc642; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 63.76% { background: #1386d2; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 75% { background: #44aaee; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 77.5% { background: #44aaee; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 91.25% { background: #1386d2; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 91.26% { background: #ff430d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { background: #ff8866; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } /* ==================== AJAX LOADING - KOOKDESIGN.IR */ @-o-keyframes loading-layer-top { 2.5% { background: #ff8866; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 13.75% { background: #ff430d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 13.76% { background: #ffae0d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { background: #ffcc66; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 27.5% { background: #ffcc66; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 41.25% { background: #ffae0d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 41.26% { background: #2cc642; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { background: #66dd77; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 52.5% { background: #66dd77; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 63.75% { background: #2cc642; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 63.76% { background: #1386d2; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 75% { background: #44aaee; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 77.5% { background: #44aaee; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 91.25% { background: #1386d2; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 91.26% { background: #ff430d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { background: #ff8866; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @keyframes loading-layer-top { 2.5% { background: #ff8866; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 13.75% { background: #ff430d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 13.76% { background: #ffae0d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { background: #ffcc66; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 27.5% { background: #ffcc66; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 41.25% { background: #ffae0d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 41.26% { background: #2cc642; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { background: #66dd77; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 52.5% { background: #66dd77; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 63.75% { background: #2cc642; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 63.76% { background: #1386d2; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 75% { background: #44aaee; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 77.5% { background: #44aaee; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 91.25% { background: #1386d2; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 91.26% { background: #ff430d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { background: #ff8866; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @-webkit-keyframes loading-layer-bottom { 0% { background: #ffcc66; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 50% { background: #ffcc66; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 75% { background: #44aaee; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 100% { background: #44aaee; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @-moz-keyframes loading-layer-bottom { 0% { background: #ffcc66; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 50% { background: #ffcc66; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 75% { background: #44aaee; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 100% { background: #44aaee; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @-o-keyframes loading-layer-bottom { 0% { background: #ffcc66; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 50% { background: #ffcc66; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 75% { background: #44aaee; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 100% { background: #44aaee; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @keyframes loading-layer-bottom { 0% { background: #ffcc66; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 50% { background: #ffcc66; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 75% { background: #44aaee; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 100% { background: #44aaee; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @-webkit-keyframes loading-layer-background { 0% { background: #ff8866; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } 25% { background: #ff8866; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 27.5% { background: #66dd77; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); } 50% { background: #66dd77; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 52.5% { background: #66dd77; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 75% { background: #66dd77; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 77.5% { background: #ff8866; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); } 100% { background: #ff8866; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @-moz-keyframes loading-layer-background { 0% { background: #ff8866; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } 25% { background: #ff8866; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 27.5% { background: #66dd77; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); } 50% { background: #66dd77; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 52.5% { background: #66dd77; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 75% { background: #66dd77; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 77.5% { background: #ff8866; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); } 100% { background: #ff8866; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @-o-keyframes loading-layer-background { 0% { background: #ff8866; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } 25% { background: #ff8866; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 27.5% { background: #66dd77; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); } 50% { background: #66dd77; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 52.5% { background: #66dd77; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 75% { background: #66dd77; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 77.5% { background: #ff8866; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); } 100% { background: #ff8866; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @keyframes loading-layer-background { 0% { background: #ff8866; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } 25% { background: #ff8866; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 27.5% { background: #66dd77; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); } 50% { background: #66dd77; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 52.5% { background: #66dd77; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 75% { background: #66dd77; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 77.5% { background: #ff8866; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); } 100% { background: #ff8866; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } /* Styles for old versions of IE */ #loading-layer { font-family: sans-serif; font-weight: 100; } /* :not(:required) hides this rule from IE9 and below */ #loading-layer:not(:required) { overflow: hidden; position: relative; text-indent: -9999px; display: inline-block; width: 48px; height: 48px; background: #ff8866; -webkit-border-radius: 24px; -moz-border-radius: 24px; -ms-border-radius: 24px; -o-border-radius: 24px; border-radius: 24px; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: loading-layer-background 3s infinite ease-in-out; -moz-animation: loading-layer-background 3s infinite ease-in-out; -ms-animation: loading-layer-background 3s infinite ease-in-out; -o-animation: loading-layer-background 3s infinite ease-in-out; animation: loading-layer-background 3s infinite ease-in-out; } #loading-layer:not(:required)::after { background: #ff8866; -webkit-border-radius: 24px 0 0 24px; -moz-border-radius: 24px 0 0 24px; -ms-border-radius: 24px 0 0 24px; -o-border-radius: 24px 0 0 24px; border-radius: 24px 0 0 24px; content: ''; position: absolute; right: 50%; top: 0; width: 50%; height: 100%; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: loading-layer-top 3s infinite linear; -moz-animation: loading-layer-top 3s infinite linear; -ms-animation: loading-layer-top 3s infinite linear; -o-animation: loading-layer-top 3s infinite linear; animation: loading-layer-top 3s infinite linear; } #loading-layer:not(:required)::before { background: #ffcc66; -webkit-border-radius: 24px 0 0 24px; -moz-border-radius: 24px 0 0 24px; -ms-border-radius: 24px 0 0 24px; -o-border-radius: 24px 0 0 24px; border-radius: 24px 0 0 24px; content: ''; position: absolute; right: 50%; top: 0; width: 50%; height: 100%; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: loading-layer-bottom 3s infinite linear; -moz-animation: loading-layer-bottom 3s infinite linear; -ms-animation: loading-layer-bottom 3s infinite linear; -o-animation: loading-layer-bottom 3s infinite linear; animation: loading-layer-bottom 3s infinite linear; } /* ======= END - ============= AJAX LOADING - KOOKDESIGN.IR */