/* ============================================== CSS3 ANIMATION CHEAT SHEET ============================================== Made by Justin Aguilar www.justinaguilar.com/animations/ Questions, comments, concerns, love letters: justin@justinaguilar.com ============================================== */ /* ============================================== slideDown ============================================== */ .slideDown{ animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideDown { 0% { transform: translateY(-100%); } 50%{ transform: translateY(8%); } 65%{ transform: translateY(-4%); } 80%{ transform: translateY(4%); } 95%{ transform: translateY(-2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-100%); } 50%{ -webkit-transform: translateY(8%); } 65%{ -webkit-transform: translateY(-4%); } 80%{ -webkit-transform: translateY(4%); } 95%{ -webkit-transform: translateY(-2%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== slideUp ============================================== */ .slideUp{ animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(100%); } 50%{ transform: translateY(-8%); } 65%{ transform: translateY(4%); } 80%{ transform: translateY(-4%); } 95%{ transform: translateY(2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50%{ -webkit-transform: translateY(-8%); } 65%{ -webkit-transform: translateY(4%); } 80%{ -webkit-transform: translateY(-4%); } 95%{ -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== slideLeft ============================================== */ .slideLeft{ animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft { 0% { transform: translateX(150%); } 50%{ transform: translateX(-8%); } 65%{ transform: translateX(4%); } 80%{ transform: translateX(-4%); } 95%{ transform: translateX(2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%); } 50%{ -webkit-transform: translateX(-8%); } 65%{ -webkit-transform: translateX(4%); } 80%{ -webkit-transform: translateX(-4%); } 95%{ -webkit-transform: translateX(2%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== slideRight ============================================== */ .slideRight{ animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight { 0% { transform: translateX(-150%); } 50%{ transform: translateX(8%); } 65%{ transform: translateX(-4%); } 80%{ transform: translateX(4%); } 95%{ transform: translateX(-2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(-150%); } 50%{ -webkit-transform: translateX(8%); } 65%{ -webkit-transform: translateX(-4%); } 80%{ -webkit-transform: translateX(4%); } 95%{ -webkit-transform: translateX(-2%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== slideExpandUp ============================================== */ .slideExpandUp{ animation-name: slideExpandUp; -webkit-animation-name: slideExpandUp; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease -out; visibility: visible !important; } @keyframes slideExpandUp { 0% { transform: translateY(100%) scaleX(0.5); } 30%{ transform: translateY(-8%) scaleX(0.5); } 40%{ transform: translateY(2%) scaleX(0.5); } 50%{ transform: translateY(0%) scaleX(1.1); } 60%{ transform: translateY(0%) scaleX(0.9); } 70% { transform: translateY(0%) scaleX(1.05); } 80%{ transform: translateY(0%) scaleX(0.95); } 90% { transform: translateY(0%) scaleX(1.02); } 100%{ transform: translateY(0%) scaleX(1); } } @-webkit-keyframes slideExpandUp { 0% { -webkit-transform: translateY(100%) scaleX(0.5); } 30%{ -webkit-transform: translateY(-8%) scaleX(0.5); } 40%{ -webkit-transform: translateY(2%) scaleX(0.5); } 50%{ -webkit-transform: translateY(0%) scaleX(1.1); } 60%{ -webkit-transform: translateY(0%) scaleX(0.9); } 70% { -webkit-transform: translateY(0%) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleX(0.95); } 90% { -webkit-transform: translateY(0%) scaleX(1.02); } 100%{ -webkit-transform: translateY(0%) scaleX(1); } } /* ============================================== expandUp ============================================== */ .expandUp{ animation-name: expandUp; -webkit-animation-name: expandUp; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes expandUp { 0% { transform: translateY(100%) scale(0.6) scaleY(0.5); } 60%{ transform: translateY(-7%) scaleY(1.12); } 75%{ transform: translateY(3%); } 100% { transform: translateY(0%) scale(1) scaleY(1); } } @-webkit-keyframes expandUp { 0% { -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); } 60%{ -webkit-transform: translateY(-7%) scaleY(1.12); } 75%{ -webkit-transform: translateY(3%); } 100% { -webkit-transform: translateY(0%) scale(1) scaleY(1); } } /* ============================================== fadeIn ============================================== */ .fadeIn{ animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } } /* ============================================== fadeOut ============================================== */ .fadeOut{ animation-name:'fadeOut'; animation-duration:2s; animation-timing-function:ease-in; animation-iteration-count:1; -webkit-animation-name:'fadeOut'; -webkit-animation-duration:2s; -webkit-animation-timing-function:ease-in; -webkit-animation-iteration-count:1; visibility: hidden; } @-webkit-keyframes 'fadeOut' { 0%{opacity:1;visibility: visible;} 100%{opacity:0;visibility: hidden;} } @keyframes 'fadeOut' { 0%{opacity:1;visibility: visible;} 100%{opacity:0;visibility: hidden;} } /* ============================================== expandOpen ============================================== */ .expandOpen{ animation-name: expandOpen; -webkit-animation-name: expandOpen; animation-duration: 1.2s; -webkit-animation-duration: 1.2s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes expandOpen { 0% { transform: scale(1.8); } 50% { transform: scale(0.95); } 80% { transform: scale(1.05); } 90% { transform: scale(0.98); } 100% { transform: scale(1); } } @-webkit-keyframes expandOpen { 0% { -webkit-transform: scale(1.8); } 50% { -webkit-transform: scale(0.95); } 80% { -webkit-transform: scale(1.05); } 90% { -webkit-transform: scale(0.98); } 100% { -webkit-transform: scale(1); } } /* ============================================== bigEntrance ============================================== */ .bigEntrance{ animation-name: bigEntrance; -webkit-animation-name: bigEntrance; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes bigEntrance { 0% { transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } @-webkit-keyframes bigEntrance { 0% { -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } /* ============================================== hatch ============================================== */ .hatch{ animation-name: hatch; -webkit-animation-name: hatch; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; visibility: visible !important; } @keyframes hatch { 0% { transform: rotate(0deg) scaleY(0.6); } 20% { transform: rotate(-2deg) scaleY(1.05); } 35% { transform: rotate(2deg) scaleY(1); } 50% { transform: rotate(-2deg); } 65% { transform: rotate(1deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes hatch { 0% { -webkit-transform: rotate(0deg) scaleY(0.6); } 20% { -webkit-transform: rotate(-2deg) scaleY(1.05); } 35% { -webkit-transform: rotate(2deg) scaleY(1); } 50% { -webkit-transform: rotate(-2deg); } 65% { -webkit-transform: rotate(1deg); } 80% { -webkit-transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0deg); } } /* ============================================== bounce ============================================== */ .bounce{ animation-name: bounce; -webkit-animation-name: bounce; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease; -webkit-animation-timing-function: ease; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes bounce { 0% { transform: translateY(0%) scaleY(0.6); } 60%{ transform: translateY(-100%) scaleY(1.1); } 70%{ transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{ transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{ transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{ transform: translateY(0%) scaleY(1) scaleX(1); } } @-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0%) scaleY(0.6); } 60%{ -webkit-transform: translateY(-100%) scaleY(1.1); } 70%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{ -webkit-transform: translateY(0%) scaleY(1) scaleX(1); } } /* ============================================== pulse ============================================== */ .pulse{ animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } } /* ============================================== floating ============================================== */ :root .floating{ animation-name: floating; -webkit-animation-name: floating; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== floating -slow ============================================== */ :root .floating-slow{ animation-name: floating-slow; -webkit-animation-name: floating-slow; animation-duration: 4s; -webkit-animation-duration: 4s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes floating-slow { 0% { transform: translateY(0%); } 50% { transform: translateY(1%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating-slow { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(1%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== tossing ============================================== */ .tossing{ animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes tossing { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } } @-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } } /* ============================================== pullUp ============================================== */ .pullUp{ animation-name: pullUp; -webkit-animation-name: pullUp; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes pullUp { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullUp { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* ============================================== pullDown ============================================== */ .pullDown{ animation-name: pullDown; -webkit-animation-name: pullDown; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } @keyframes pullDown { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullDown { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* ============================================== stretchLeft ============================================== */ .stretchLeft{ animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @keyframes stretchLeft { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchLeft { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /* ============================================== stretchRight ============================================== */ .stretchRight{ animation-name: stretchRight; -webkit-animation-name: stretchRight; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretchRight { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchRight { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /* ============================================== stretchLeft ============================================== */ .easeOutCubic{ animation-name: anim1407348195126; -webkit-animation-name: anim1407348195126; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; /*animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; */ } @keyframes anim1407348195126 { 0% { transform: matrix(-0, 1, -1, -0, 598, 0); } 1% { transform: matrix(0.04664, 0.99891, -0.99891, 0.04664, 580.23877, 0); } 2% { transform: matrix(0.09224, 0.99574, -0.99574, 0.09224, 562.83282, 0); } 3% { transform: matrix(0.13675, 0.99061, -0.99061, 0.13675, 545.77844, 0); } 4% { transform: matrix(0.18007, 0.98365, -0.98365, 0.18007, 529.07214, 0); } 5% { transform: matrix(0.22217, 0.97501, -0.97501, 0.22217, 512.71027, 0); } 6% { transform: matrix(0.26299, 0.9648, -0.9648, 0.26299, 496.68924, 0); } 7% { transform: matrix(0.3025, 0.95315, -0.95315, 0.3025, 481.00549, 0); } 8% { transform: matrix(0.34068, 0.94018, -0.94018, 0.34068, 465.65543, 0); } 9% { transform: matrix(0.37749, 0.92601, -0.92601, 0.37749, 450.63547, 0); } 10% { transform: matrix(0.44703, 0.89452, -0.89452, 0.44703, 421.57147, 0); } 11% { transform: matrix(0.47973, 0.87742, -0.87742, 0.47973, 407.52026, 0); } 12% { transform: matrix(0.51107, 0.85954, -0.85954, 0.51107, 393.78479, 0); } 13% { transform: matrix(0.54105, 0.84099, -0.84099, 0.54105, 380.36148, 0); } 15% { transform: matrix(0.56969, 0.82186, -0.82186, 0.56969, 367.24676, 0); } 16% { transform: matrix(0.59702, 0.80223, -0.80223, 0.59702, 354.43698, 0); } 17% { transform: matrix(0.62305, 0.78218, -0.78218, 0.62305, 341.92862, 0); } 18% { transform: matrix(0.64781, 0.7618, -0.7618, 0.64781, 329.71805, 0); } 19% { transform: matrix(0.67133, 0.74116, -0.74116, 0.67133, 317.80173, 0); } 20% { transform: matrix(0.69365, 0.72031, -0.72031, 0.69365, 306.176, 0); } 21% { transform: matrix(0.7148, 0.69933, -0.69933, 0.7148, 294.83731, 0); } 22% { transform: matrix(0.7348, 0.67828, -0.67828, 0.7348, 283.7821, 0); } 23% { transform: matrix(0.7537, 0.65722, -0.65722, 0.7537, 273.00674, 0); } 24% { transform: matrix(0.77154, 0.63618, -0.63618, 0.77154, 262.50766, 0); } 25% { transform: matrix(0.78835, 0.61523, -0.61523, 0.78835, 252.28125, 0); } 26% { transform: matrix(0.80417, 0.5944, -0.5944, 0.80417, 242.32394, 0); } 27% { transform: matrix(0.81903, 0.57374, -0.57374, 0.81903, 232.63217, 0); } 28% { transform: matrix(0.83299, 0.55328, -0.55328, 0.83299, 223.2023, 0); } 29% { transform: matrix(0.84608, 0.53306, -0.53306, 0.84608, 214.03078, 0); } 30% { transform: matrix(0.85833, 0.51309, -0.51309, 0.85833, 205.114, 0); } 31% { transform: matrix(0.86979, 0.49342, -0.49342, 0.86979, 196.44838, 0); } 32% { transform: matrix(0.88049, 0.47407, -0.47407, 0.88049, 188.03033, 0); } 33% { transform: matrix(0.89046, 0.45506, -0.45506, 0.89046, 179.85628, 0); } 34% { transform: matrix(0.89975, 0.43641, -0.43641, 0.89975, 171.92261, 0); } 35% { transform: matrix(0.90839, 0.41813, -0.41813, 0.90839, 164.22575, 0); } 36% { transform: matrix(0.91641, 0.40023, -0.40023, 0.91641, 156.76211, 0); } 37% { transform: matrix(0.92385, 0.38275, -0.38275, 0.92385, 149.52811, 0); } 38% { transform: matrix(0.93074, 0.36568, -0.36568, 0.93074, 142.52014, 0); } 39% { transform: matrix(0.93711, 0.34903, -0.34903, 0.93711, 135.73463, 0); } 40% { transform: matrix(0.94299, 0.33282, -0.33282, 0.94299, 129.168, 0); } 41% { transform: matrix(0.94841, 0.31704, -0.31704, 0.94841, 122.81664, 0); } 42% { transform: matrix(0.9534, 0.30171, -0.30171, 0.9534, 116.67698, 0); } 43% { transform: matrix(0.95799, 0.28681, -0.28681, 0.95799, 110.74541, 0); } 44% { transform: matrix(0.96219, 0.27237, -0.27237, 0.96219, 105.01837, 0); } 45% { transform: matrix(0.96605, 0.25838, -0.25838, 0.96605, 99.49225, 0); } 46% { transform: matrix(0.96957, 0.24483, -0.24483, 0.96957, 94.16347, 0); } 47% { transform: matrix(0.97278, 0.23173, -0.23173, 0.97278, 89.02845, 0); } 48% { transform: matrix(0.97571, 0.21908, -0.21908, 0.97571, 84.08358, 0); } 49% { transform: matrix(0.97837, 0.20686, -0.20686, 0.97837, 79.3253, 0); } 50% { transform: matrix(0.98079, 0.19509, -0.19509, 0.98079, 74.75, 0); } 51% { transform: matrix(0.98297, 0.18375, -0.18375, 0.98297, 70.3541, 0); } 52% { transform: matrix(0.98495, 0.17285, -0.17285, 0.98495, 66.13402, 0); } 53% { transform: matrix(0.98673, 0.16236, -0.16236, 0.98673, 62.08615, 0); } 54% { transform: matrix(0.98833, 0.1523, -0.1523, 0.98833, 58.20693, 0); } 55% { transform: matrix(0.98977, 0.14265, -0.14265, 0.98977, 54.49275, 0); } 56% { transform: matrix(0.99106, 0.13341, -0.13341, 0.99106, 50.94003, 0); } 57% { transform: matrix(0.99221, 0.12457, -0.12457, 0.99221, 47.54519, 0); } 58% { transform: matrix(0.99323, 0.11612, -0.11612, 0.99323, 44.30462, 0); } 59% { transform: matrix(0.99415, 0.10805, -0.10805, 0.99415, 41.21476, 0); } 60% { transform: matrix(0.99495, 0.10036, -0.10036, 0.99495, 38.272, 0); } 61% { transform: matrix(0.99566, 0.09305, -0.09305, 0.99566, 35.47276, 0); } 62% { transform: matrix(0.99629, 0.08608, -0.08608, 0.99629, 32.81346, 0); } 63% { transform: matrix(0.99684, 0.07949, -0.07949, 0.99684, 30.29049, 0); } 64% { transform: matrix(0.99731, 0.07322, -0.07322, 0.99731, 27.90029, 0); } 65% { transform: matrix(0.99773, 0.0673, -0.0673, 0.99773, 25.63925, 0); } 66% { transform: matrix(0.99809, 0.0617, -0.0617, 0.99809, 23.50379, 0); } 67% { transform: matrix(0.99841, 0.05642, -0.05642, 0.99841, 21.49033, 0); } 68% { transform: matrix(0.99868, 0.05145, -0.05145, 0.99868, 19.59526, 0); } 69% { transform: matrix(0.99891, 0.04678, -0.04678, 0.99891, 17.81502, 0); } 70% { transform: matrix(0.9991, 0.0424, -0.0424, 0.9991, 16.146, 0); } 71% { transform: matrix(0.99927, 0.0383, -0.0383, 0.99927, 14.58462, 0); } 72% { transform: matrix(0.99941, 0.03447, -0.03447, 0.99941, 13.1273, 0); } 73% { transform: matrix(0.99952, 0.03092, -0.03092, 0.99952, 11.77043, 0); } 74% { transform: matrix(0.99962, 0.02761, -0.02761, 0.99962, 10.51045, 0); } 75% { transform: matrix(0.9997, 0.02454, -0.02454, 0.9997, 9.34375, 0); } 76% { transform: matrix(0.99976, 0.02171, -0.02171, 0.99976, 8.26675, 0); } 77% { transform: matrix(0.99982, 0.01911, -0.01911, 0.99982, 7.27587, 0); } 78% { transform: matrix(0.99986, 0.01673, -0.01673, 0.99986, 6.3675, 0); } 79% { transform: matrix(0.99989, 0.01455, -0.01455, 0.99989, 5.53808, 0); } 80% { transform: matrix(0.99992, 0.01257, -0.01257, 0.99992, 4.784, 0); } 81% { transform: matrix(0.99994, 0.01077, -0.01077, 0.99994, 4.10168, 0); } 82% { transform: matrix(0.99996, 0.00916, -0.00916, 0.99996, 3.48754, 0); } 83% { transform: matrix(0.99997, 0.00772, -0.00772, 0.99997, 2.93797, 0); } 84% { transform: matrix(0.99998, 0.00643, -0.00643, 0.99998, 2.44941, 0); } 85% { transform: matrix(0.99999, 0.0053, -0.0053, 0.99999, 2.01825, 0); } 86% { transform: matrix(0.99999, 0.00431, -0.00431, 0.99999, 1.64091, 0); } 87% { transform: matrix(0.99999, 0.00345, -0.00345, 0.99999, 1.31381, 0); } 88% { transform: matrix(1, 0.00271, -0.00271, 1, 1.03334, 0); } 89% { transform: matrix(1, 0.00209, -0.00209, 1, 0.79594, 0); } 90% { transform: matrix(1, 0.00157, -0.00157, 1, 0.598, 0); } 91% { transform: matrix(1, 0.00115, -0.00115, 1, 0.43594, 0); } 92% { transform: matrix(1, 0.0008, -0.0008, 1, 0.30618, 0); } 93% { transform: matrix(1, 0.00054, -0.00054, 1, 0.20511, 0); } 94% { transform: matrix(1, 0.00034, -0.00034, 1, 0.12917, 0); } 95% { transform: matrix(1, 0.0002, -0.0002, 1, 0.07475, 0); } 96% { transform: matrix(1, 0.0001, -0.0001, 1, 0.03827, 0); } 97% { transform: matrix(1, 0.00004, -0.00004, 1, 0.01615, 0); } 98% { transform: matrix(1, 0.00001, -0.00001, 1, 0.00478, 0); } 99% { transform: matrix(1, 0, 0, 1, 0.0006, 0); } 100% { transform: matrix(1, 0, 0, 1, 0, 0); } } @-webkit-keyframes anim1407348195126 { 0% { -webkit-transform: matrix(-0, 1, -1, -0, 598, 0); } 1% { -webkit-transform: matrix(0.04664, 0.99891, -0.99891, 0.04664, 580.23877, 0); } 2% { -webkit-transform: matrix(0.09224, 0.99574, -0.99574, 0.09224, 562.83282, 0); } 3% { -webkit-transform: matrix(0.13675, 0.99061, -0.99061, 0.13675, 545.77844, 0); } 4% { -webkit-transform: matrix(0.18007, 0.98365, -0.98365, 0.18007, 529.07214, 0); } 5% { -webkit-transform: matrix(0.22217, 0.97501, -0.97501, 0.22217, 512.71027, 0); } 6% { -webkit-transform: matrix(0.26299, 0.9648, -0.9648, 0.26299, 496.68924, 0); } 7% { -webkit-transform: matrix(0.3025, 0.95315, -0.95315, 0.3025, 481.00549, 0); } 8% { -webkit-transform: matrix(0.34068, 0.94018, -0.94018, 0.34068, 465.65543, 0); } 9% { -webkit-transform: matrix(0.37749, 0.92601, -0.92601, 0.37749, 450.63547, 0); } 10% { -webkit-transform: matrix(0.44703, 0.89452, -0.89452, 0.44703, 421.57147, 0); } 11% { -webkit-transform: matrix(0.47973, 0.87742, -0.87742, 0.47973, 407.52026, 0); } 12% { -webkit-transform: matrix(0.51107, 0.85954, -0.85954, 0.51107, 393.78479, 0); } 13% { -webkit-transform: matrix(0.54105, 0.84099, -0.84099, 0.54105, 380.36148, 0); } 15% { -webkit-transform: matrix(0.56969, 0.82186, -0.82186, 0.56969, 367.24676, 0); } 16% { -webkit-transform: matrix(0.59702, 0.80223, -0.80223, 0.59702, 354.43698, 0); } 17% { -webkit-transform: matrix(0.62305, 0.78218, -0.78218, 0.62305, 341.92862, 0); } 18% { -webkit-transform: matrix(0.64781, 0.7618, -0.7618, 0.64781, 329.71805, 0); } 19% { -webkit-transform: matrix(0.67133, 0.74116, -0.74116, 0.67133, 317.80173, 0); } 20% { -webkit-transform: matrix(0.69365, 0.72031, -0.72031, 0.69365, 306.176, 0); } 21% { -webkit-transform: matrix(0.7148, 0.69933, -0.69933, 0.7148, 294.83731, 0); } 22% { -webkit-transform: matrix(0.7348, 0.67828, -0.67828, 0.7348, 283.7821, 0); } 23% { -webkit-transform: matrix(0.7537, 0.65722, -0.65722, 0.7537, 273.00674, 0); } 24% { -webkit-transform: matrix(0.77154, 0.63618, -0.63618, 0.77154, 262.50766, 0); } 25% { -webkit-transform: matrix(0.78835, 0.61523, -0.61523, 0.78835, 252.28125, 0); } 26% { -webkit-transform: matrix(0.80417, 0.5944, -0.5944, 0.80417, 242.32394, 0); } 27% { -webkit-transform: matrix(0.81903, 0.57374, -0.57374, 0.81903, 232.63217, 0); } 28% { -webkit-transform: matrix(0.83299, 0.55328, -0.55328, 0.83299, 223.2023, 0); } 29% { -webkit-transform: matrix(0.84608, 0.53306, -0.53306, 0.84608, 214.03078, 0); } 30% { -webkit-transform: matrix(0.85833, 0.51309, -0.51309, 0.85833, 205.114, 0); } 31% { -webkit-transform: matrix(0.86979, 0.49342, -0.49342, 0.86979, 196.44838, 0); } 32% { -webkit-transform: matrix(0.88049, 0.47407, -0.47407, 0.88049, 188.03033, 0); } 33% { -webkit-transform: matrix(0.89046, 0.45506, -0.45506, 0.89046, 179.85628, 0); } 34% { -webkit-transform: matrix(0.89975, 0.43641, -0.43641, 0.89975, 171.92261, 0); } 35% { -webkit-transform: matrix(0.90839, 0.41813, -0.41813, 0.90839, 164.22575, 0); } 36% { -webkit-transform: matrix(0.91641, 0.40023, -0.40023, 0.91641, 156.76211, 0); } 37% { -webkit-transform: matrix(0.92385, 0.38275, -0.38275, 0.92385, 149.52811, 0); } 38% { -webkit-transform: matrix(0.93074, 0.36568, -0.36568, 0.93074, 142.52014, 0); } 39% { -webkit-transform: matrix(0.93711, 0.34903, -0.34903, 0.93711, 135.73463, 0); } 40% { -webkit-transform: matrix(0.94299, 0.33282, -0.33282, 0.94299, 129.168, 0); } 41% { -webkit-transform: matrix(0.94841, 0.31704, -0.31704, 0.94841, 122.81664, 0); } 42% { -webkit-transform: matrix(0.9534, 0.30171, -0.30171, 0.9534, 116.67698, 0); } 43% { -webkit-transform: matrix(0.95799, 0.28681, -0.28681, 0.95799, 110.74541, 0); } 44% { -webkit-transform: matrix(0.96219, 0.27237, -0.27237, 0.96219, 105.01837, 0); } 45% { -webkit-transform: matrix(0.96605, 0.25838, -0.25838, 0.96605, 99.49225, 0); } 46% { -webkit-transform: matrix(0.96957, 0.24483, -0.24483, 0.96957, 94.16347, 0); } 47% { -webkit-transform: matrix(0.97278, 0.23173, -0.23173, 0.97278, 89.02845, 0); } 48% { -webkit-transform: matrix(0.97571, 0.21908, -0.21908, 0.97571, 84.08358, 0); } 49% { -webkit-transform: matrix(0.97837, 0.20686, -0.20686, 0.97837, 79.3253, 0); } 50% { -webkit-transform: matrix(0.98079, 0.19509, -0.19509, 0.98079, 74.75, 0); } 51% { -webkit-transform: matrix(0.98297, 0.18375, -0.18375, 0.98297, 70.3541, 0); } 52% { -webkit-transform: matrix(0.98495, 0.17285, -0.17285, 0.98495, 66.13402, 0); } 53% { -webkit-transform: matrix(0.98673, 0.16236, -0.16236, 0.98673, 62.08615, 0); } 54% { -webkit-transform: matrix(0.98833, 0.1523, -0.1523, 0.98833, 58.20693, 0); } 55% { -webkit-transform: matrix(0.98977, 0.14265, -0.14265, 0.98977, 54.49275, 0); } 56% { -webkit-transform: matrix(0.99106, 0.13341, -0.13341, 0.99106, 50.94003, 0); } 57% { -webkit-transform: matrix(0.99221, 0.12457, -0.12457, 0.99221, 47.54519, 0); } 58% { -webkit-transform: matrix(0.99323, 0.11612, -0.11612, 0.99323, 44.30462, 0); } 59% { -webkit-transform: matrix(0.99415, 0.10805, -0.10805, 0.99415, 41.21476, 0); } 60% { -webkit-transform: matrix(0.99495, 0.10036, -0.10036, 0.99495, 38.272, 0); } 61% { -webkit-transform: matrix(0.99566, 0.09305, -0.09305, 0.99566, 35.47276, 0); } 62% { -webkit-transform: matrix(0.99629, 0.08608, -0.08608, 0.99629, 32.81346, 0); } 63% { -webkit-transform: matrix(0.99684, 0.07949, -0.07949, 0.99684, 30.29049, 0); } 64% { -webkit-transform: matrix(0.99731, 0.07322, -0.07322, 0.99731, 27.90029, 0); } 65% { -webkit-transform: matrix(0.99773, 0.0673, -0.0673, 0.99773, 25.63925, 0); } 66% { -webkit-transform: matrix(0.99809, 0.0617, -0.0617, 0.99809, 23.50379, 0); } 67% { -webkit-transform: matrix(0.99841, 0.05642, -0.05642, 0.99841, 21.49033, 0); } 68% { -webkit-transform: matrix(0.99868, 0.05145, -0.05145, 0.99868, 19.59526, 0); } 69% { -webkit-transform: matrix(0.99891, 0.04678, -0.04678, 0.99891, 17.81502, 0); } 70% { -webkit-transform: matrix(0.9991, 0.0424, -0.0424, 0.9991, 16.146, 0); } 71% { -webkit-transform: matrix(0.99927, 0.0383, -0.0383, 0.99927, 14.58462, 0); } 72% { -webkit-transform: matrix(0.99941, 0.03447, -0.03447, 0.99941, 13.1273, 0); } 73% { -webkit-transform: matrix(0.99952, 0.03092, -0.03092, 0.99952, 11.77043, 0); } 74% { -webkit-transform: matrix(0.99962, 0.02761, -0.02761, 0.99962, 10.51045, 0); } 75% { -webkit-transform: matrix(0.9997, 0.02454, -0.02454, 0.9997, 9.34375, 0); } 76% { -webkit-transform: matrix(0.99976, 0.02171, -0.02171, 0.99976, 8.26675, 0); } 77% { -webkit-transform: matrix(0.99982, 0.01911, -0.01911, 0.99982, 7.27587, 0); } 78% { -webkit-transform: matrix(0.99986, 0.01673, -0.01673, 0.99986, 6.3675, 0); } 79% { -webkit-transform: matrix(0.99989, 0.01455, -0.01455, 0.99989, 5.53808, 0); } 80% { -webkit-transform: matrix(0.99992, 0.01257, -0.01257, 0.99992, 4.784, 0); } 81% { -webkit-transform: matrix(0.99994, 0.01077, -0.01077, 0.99994, 4.10168, 0); } 82% { -webkit-transform: matrix(0.99996, 0.00916, -0.00916, 0.99996, 3.48754, 0); } 83% { -webkit-transform: matrix(0.99997, 0.00772, -0.00772, 0.99997, 2.93797, 0); } 84% { -webkit-transform: matrix(0.99998, 0.00643, -0.00643, 0.99998, 2.44941, 0); } 85% { -webkit-transform: matrix(0.99999, 0.0053, -0.0053, 0.99999, 2.01825, 0); } 86% { -webkit-transform: matrix(0.99999, 0.00431, -0.00431, 0.99999, 1.64091, 0); } 87% { -webkit-transform: matrix(0.99999, 0.00345, -0.00345, 0.99999, 1.31381, 0); } 88% { -webkit-transform: matrix(1, 0.00271, -0.00271, 1, 1.03334, 0); } 89% { -webkit-transform: matrix(1, 0.00209, -0.00209, 1, 0.79594, 0); } 90% { -webkit-transform: matrix(1, 0.00157, -0.00157, 1, 0.598, 0); } 91% { -webkit-transform: matrix(1, 0.00115, -0.00115, 1, 0.43594, 0); } 92% { -webkit-transform: matrix(1, 0.0008, -0.0008, 1, 0.30618, 0); } 93% { -webkit-transform: matrix(1, 0.00054, -0.00054, 1, 0.20511, 0); } 94% { -webkit-transform: matrix(1, 0.00034, -0.00034, 1, 0.12917, 0); } 95% { -webkit-transform: matrix(1, 0.0002, -0.0002, 1, 0.07475, 0); } 96% { -webkit-transform: matrix(1, 0.0001, -0.0001, 1, 0.03827, 0); } 97% { -webkit-transform: matrix(1, 0.00004, -0.00004, 1, 0.01615, 0); } 98% { -webkit-transform: matrix(1, 0.00001, -0.00001, 1, 0.00478, 0); } 99% { -webkit-transform: matrix(1, 0, 0, 1, 0.0006, 0); } 100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); } }