diff --git a/demo/demo.js b/demo/demo.js index 4f7f898ba..fa48a7509 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -97,7 +97,6 @@ if (editor) { ContentKitDemo.syncCodePane(editor); editor.on('update', function(data) { ContentKitDemo.syncCodePane(this); - console.log(data); }); } if (location.hash === '#code') { diff --git a/demo/index.html b/demo/index.html index 92842fe66..7b1b78b87 100644 --- a/demo/index.html +++ b/demo/index.html @@ -16,7 +16,7 @@

ContentKit Editor

- +
diff --git a/dist/content-kit-editor.css b/dist/content-kit-editor.css index 7d5891581..cd264a4d4 100755 --- a/dist/content-kit-editor.css +++ b/dist/content-kit-editor.css @@ -86,8 +86,8 @@ } .ck-toolbar, .ck-toolbar-prompt { - -webkit-animation: pop 0.5s linear; - animation: pop 0.5s linear; + -webkit-animation: pop 0.25s; + animation: pop 0.25s; } .ck-toolbar-buttons { border-radius: 5px; @@ -104,7 +104,7 @@ margin: 0; width: 48px; height: 44px; - line-height: 44px; + line-height: 42px; cursor: pointer; transition: background-color 0.15s; text-shadow: 0 1px rgba(0, 0, 0, 0.7); @@ -221,8 +221,8 @@ line-height: 0.7em; cursor: pointer; transition: color 0.15s, border-color 0.15s, transform 0.35s; - -webkit-animation: pop 0.5s linear; - animation: pop 0.5s linear; + -webkit-animation: pop 0.25s; + animation: pop 0.25s; } .ck-embed-intent-btn:hover { color: #999; @@ -442,496 +442,23 @@ background-position: 288px 0; } } -/* Generated with Bounce.js. Edit at http://goo.gl/kRKkQd */ @-webkit-keyframes pop { 0% { - -webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 10, 0, 1); - transform: matrix3d(0.7, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 10, 0, 1); - } - 1.666667% { - -webkit-transform: matrix3d(0.76047, 0, 0, 0, 0, 0.60078, 0, 0, 0, 0, 1, 0, 0, 9.59374, 0, 1); - transform: matrix3d(0.76047, 0, 0, 0, 0, 0.60078, 0, 0, 0, 0, 1, 0, 0, 9.59374, 0, 1); - } - 3.333333% { - -webkit-transform: matrix3d(0.81739, 0, 0, 0, 0, 0.69565, 0, 0, 0, 0, 1, 0, 0, 8.46888, 0, 1); - transform: matrix3d(0.81739, 0, 0, 0, 0, 0.69565, 0, 0, 0, 0, 1, 0, 0, 8.46888, 0, 1); - } - 5% { - -webkit-transform: matrix3d(0.86799, 0, 0, 0, 0, 0.77999, 0, 0, 0, 0, 1, 0, 0, 6.86422, 0, 1); - transform: matrix3d(0.86799, 0, 0, 0, 0, 0.77999, 0, 0, 0, 0, 1, 0, 0, 6.86422, 0, 1); - } - 6.666667% { - -webkit-transform: matrix3d(0.91088, 0, 0, 0, 0, 0.85146, 0, 0, 0, 0, 1, 0, 0, 5.05894, 0, 1); - transform: matrix3d(0.91088, 0, 0, 0, 0, 0.85146, 0, 0, 0, 0, 1, 0, 0, 5.05894, 0, 1); - } - 8.333333% { - -webkit-transform: matrix3d(0.94564, 0, 0, 0, 0, 0.9094, 0, 0, 0, 0, 1, 0, 0, 3.29569, 0, 1); - transform: matrix3d(0.94564, 0, 0, 0, 0, 0.9094, 0, 0, 0, 0, 1, 0, 0, 3.29569, 0, 1); - } - 10% { - -webkit-transform: matrix3d(0.97258, 0, 0, 0, 0, 0.95429, 0, 0, 0, 0, 1, 0, 0, 1.74471, 0, 1); - transform: matrix3d(0.97258, 0, 0, 0, 0, 0.95429, 0, 0, 0, 0, 1, 0, 0, 1.74471, 0, 1); - } - 11.666667% { - -webkit-transform: matrix3d(0.99243, 0, 0, 0, 0, 0.98738, 0, 0, 0, 0, 1, 0, 0, 0.49844, 0, 1); - transform: matrix3d(0.99243, 0, 0, 0, 0, 0.98738, 0, 0, 0, 0, 1, 0, 0, 0.49844, 0, 1); - } - 13.333333% { - -webkit-transform: matrix3d(1.00618, 0, 0, 0, 0, 1.0103, 0, 0, 0, 0, 1, 0, 0, -0.41631, 0, 1); - transform: matrix3d(1.00618, 0, 0, 0, 0, 1.0103, 0, 0, 0, 0, 1, 0, 0, -0.41631, 0, 1); - } - 15% { - -webkit-transform: matrix3d(1.01492, 0, 0, 0, 0, 1.02486, 0, 0, 0, 0, 1, 0, 0, -1.01911, 0, 1); - transform: matrix3d(1.01492, 0, 0, 0, 0, 1.02486, 0, 0, 0, 0, 1, 0, 0, -1.01911, 0, 1); - } - 16.666667% { - -webkit-transform: matrix3d(1.0197, 0, 0, 0, 0, 1.03283, 0, 0, 0, 0, 1, 0, 0, -1.35648, 0, 1); - transform: matrix3d(1.0197, 0, 0, 0, 0, 1.03283, 0, 0, 0, 0, 1, 0, 0, -1.35648, 0, 1); - } - 18.333333% { - -webkit-transform: matrix3d(1.02152, 0, 0, 0, 0, 1.03587, 0, 0, 0, 0, 1, 0, 0, -1.48616, 0, 1); - transform: matrix3d(1.02152, 0, 0, 0, 0, 1.03587, 0, 0, 0, 0, 1, 0, 0, -1.48616, 0, 1); - } - 20% { - -webkit-transform: matrix3d(1.02124, 0, 0, 0, 0, 1.0354, 0, 0, 0, 0, 1, 0, 0, -1.46607, 0, 1); - transform: matrix3d(1.02124, 0, 0, 0, 0, 1.0354, 0, 0, 0, 0, 1, 0, 0, -1.46607, 0, 1); - } - 21.666667% { - -webkit-transform: matrix3d(1.01958, 0, 0, 0, 0, 1.03263, 0, 0, 0, 0, 1, 0, 0, -1.34772, 0, 1); - transform: matrix3d(1.01958, 0, 0, 0, 0, 1.03263, 0, 0, 0, 0, 1, 0, 0, -1.34772, 0, 1); - } - 23.333333% { - -webkit-transform: matrix3d(1.01711, 0, 0, 0, 0, 1.02852, 0, 0, 0, 0, 1, 0, 0, -1.17322, 0, 1); - transform: matrix3d(1.01711, 0, 0, 0, 0, 1.02852, 0, 0, 0, 0, 1, 0, 0, -1.17322, 0, 1); - } - 25% { - -webkit-transform: matrix3d(1.01428, 0, 0, 0, 0, 1.0238, 0, 0, 0, 0, 1, 0, 0, -0.97458, 0, 1); - transform: matrix3d(1.01428, 0, 0, 0, 0, 1.0238, 0, 0, 0, 0, 1, 0, 0, -0.97458, 0, 1); - } - 26.666667% { - -webkit-transform: matrix3d(1.0114, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, -0.7745, 0, 1); - transform: matrix3d(1.0114, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, -0.7745, 0, 1); - } - 28.333333% { - -webkit-transform: matrix3d(1.00869, 0, 0, 0, 0, 1.01449, 0, 0, 0, 0, 1, 0, 0, -0.58784, 0, 1); - transform: matrix3d(1.00869, 0, 0, 0, 0, 1.01449, 0, 0, 0, 0, 1, 0, 0, -0.58784, 0, 1); - } - 30% { - -webkit-transform: matrix3d(1.00628, 0, 0, 0, 0, 1.01047, 0, 0, 0, 0, 1, 0, 0, -0.42325, 0, 1); - transform: matrix3d(1.00628, 0, 0, 0, 0, 1.01047, 0, 0, 0, 0, 1, 0, 0, -0.42325, 0, 1); - } - 31.666667% { - -webkit-transform: matrix3d(1.00424, 0, 0, 0, 0, 1.00707, 0, 0, 0, 0, 1, 0, 0, -0.28479, 0, 1); - transform: matrix3d(1.00424, 0, 0, 0, 0, 1.00707, 0, 0, 0, 0, 1, 0, 0, -0.28479, 0, 1); - } - 33.333333% { - -webkit-transform: matrix3d(1.00259, 0, 0, 0, 0, 1.00431, 0, 0, 0, 0, 1, 0, 0, -0.17323, 0, 1); - transform: matrix3d(1.00259, 0, 0, 0, 0, 1.00431, 0, 0, 0, 0, 1, 0, 0, -0.17323, 0, 1); - } - 35% { - -webkit-transform: matrix3d(1.00131, 0, 0, 0, 0, 1.00218, 0, 0, 0, 0, 1, 0, 0, -0.08721, 0, 1); - transform: matrix3d(1.00131, 0, 0, 0, 0, 1.00218, 0, 0, 0, 0, 1, 0, 0, -0.08721, 0, 1); - } - 36.666667% { - -webkit-transform: matrix3d(1.00036, 0, 0, 0, 0, 1.0006, 0, 0, 0, 0, 1, 0, 0, -0.02404, 0, 1); - transform: matrix3d(1.00036, 0, 0, 0, 0, 1.0006, 0, 0, 0, 0, 1, 0, 0, -0.02404, 0, 1); - } - 38.333333% { - -webkit-transform: matrix3d(0.99971, 0, 0, 0, 0, 0.99951, 0, 0, 0, 0, 1, 0, 0, 0.0196, 0, 1); - transform: matrix3d(0.99971, 0, 0, 0, 0, 0.99951, 0, 0, 0, 0, 1, 0, 0, 0.0196, 0, 1); - } - 40% { - -webkit-transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99882, 0, 0, 0, 0, 1, 0, 0, 0.04727, 0, 1); - transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99882, 0, 0, 0, 0, 1, 0, 0, 0.04727, 0, 1); - } - 41.666667% { - -webkit-transform: matrix3d(0.99906, 0, 0, 0, 0, 0.99844, 0, 0, 0, 0, 1, 0, 0, 0.06241, 0, 1); - transform: matrix3d(0.99906, 0, 0, 0, 0, 0.99844, 0, 0, 0, 0, 1, 0, 0, 0.06241, 0, 1); - } - 43.333333% { - -webkit-transform: matrix3d(0.99898, 0, 0, 0, 0, 0.99829, 0, 0, 0, 0, 1, 0, 0, 0.06817, 0, 1); - transform: matrix3d(0.99898, 0, 0, 0, 0, 0.99829, 0, 0, 0, 0, 1, 0, 0, 0.06817, 0, 1); - } - 45% { - -webkit-transform: matrix3d(0.99899, 0, 0, 0, 0, 0.99832, 0, 0, 0, 0, 1, 0, 0, 0.06728, 0, 1); - transform: matrix3d(0.99899, 0, 0, 0, 0, 0.99832, 0, 0, 0, 0, 1, 0, 0, 0.06728, 0, 1); - } - 46.666667% { - -webkit-transform: matrix3d(0.99907, 0, 0, 0, 0, 0.99845, 0, 0, 0, 0, 1, 0, 0, 0.06202, 0, 1); - transform: matrix3d(0.99907, 0, 0, 0, 0, 0.99845, 0, 0, 0, 0, 1, 0, 0, 0.06202, 0, 1); - } - 48.333333% { - -webkit-transform: matrix3d(0.99919, 0, 0, 0, 0, 0.99864, 0, 0, 0, 0, 1, 0, 0, 0.05422, 0, 1); - transform: matrix3d(0.99919, 0, 0, 0, 0, 0.99864, 0, 0, 0, 0, 1, 0, 0, 0.05422, 0, 1); + opacity: 0.8; + -webkit-transform: scale(0.9) translateY(14px); } 50% { - -webkit-transform: matrix3d(0.99932, 0, 0, 0, 0, 0.99887, 0, 0, 0, 0, 1, 0, 0, 0.04526, 0, 1); - transform: matrix3d(0.99932, 0, 0, 0, 0, 0.99887, 0, 0, 0, 0, 1, 0, 0, 0.04526, 0, 1); - } - 51.666667% { - -webkit-transform: matrix3d(0.99946, 0, 0, 0, 0, 0.9991, 0, 0, 0, 0, 1, 0, 0, 0.03614, 0, 1); - transform: matrix3d(0.99946, 0, 0, 0, 0, 0.9991, 0, 0, 0, 0, 1, 0, 0, 0.03614, 0, 1); - } - 53.333333% { - -webkit-transform: matrix3d(0.99959, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0.02756, 0, 1); - transform: matrix3d(0.99959, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0.02756, 0, 1); - } - 55% { - -webkit-transform: matrix3d(0.9997, 0, 0, 0, 0, 0.9995, 0, 0, 0, 0, 1, 0, 0, 0.01993, 0, 1); - transform: matrix3d(0.9997, 0, 0, 0, 0, 0.9995, 0, 0, 0, 0, 1, 0, 0, 0.01993, 0, 1); - } - 56.666667% { - -webkit-transform: matrix3d(0.9998, 0, 0, 0, 0, 0.99966, 0, 0, 0, 0, 1, 0, 0, 0.01346, 0, 1); - transform: matrix3d(0.9998, 0, 0, 0, 0, 0.99966, 0, 0, 0, 0, 1, 0, 0, 0.01346, 0, 1); - } - 58.333333% { - -webkit-transform: matrix3d(0.99988, 0, 0, 0, 0, 0.99979, 0, 0, 0, 0, 1, 0, 0, 0.00821, 0, 1); - transform: matrix3d(0.99988, 0, 0, 0, 0, 0.99979, 0, 0, 0, 0, 1, 0, 0, 0.00821, 0, 1); - } - 60% { - -webkit-transform: matrix3d(0.99994, 0, 0, 0, 0, 0.9999, 0, 0, 0, 0, 1, 0, 0, 0.00414, 0, 1); - transform: matrix3d(0.99994, 0, 0, 0, 0, 0.9999, 0, 0, 0, 0, 1, 0, 0, 0.00414, 0, 1); - } - 61.666667% { - -webkit-transform: matrix3d(0.99998, 0, 0, 0, 0, 0.99997, 0, 0, 0, 0, 1, 0, 0, 0.00114, 0, 1); - transform: matrix3d(0.99998, 0, 0, 0, 0, 0.99997, 0, 0, 0, 0, 1, 0, 0, 0.00114, 0, 1); - } - 63.333333% { - -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00093, 0, 1); - transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00093, 0, 1); - } - 65% { - -webkit-transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00006, 0, 0, 0, 0, 1, 0, 0, -0.00225, 0, 1); - transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00006, 0, 0, 0, 0, 1, 0, 0, -0.00225, 0, 1); - } - 66.666667% { - -webkit-transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, -0.00298, 0, 1); - transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, -0.00298, 0, 1); - } - 68.333333% { - -webkit-transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00008, 0, 0, 0, 0, 1, 0, 0, -0.00325, 0, 1); - transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00008, 0, 0, 0, 0, 1, 0, 0, -0.00325, 0, 1); - } - 70% { - -webkit-transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00008, 0, 0, 0, 0, 1, 0, 0, -0.00321, 0, 1); - transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00008, 0, 0, 0, 0, 1, 0, 0, -0.00321, 0, 1); - } - 71.666667% { - -webkit-transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, -0.00296, 0, 1); - transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, -0.00296, 0, 1); - } - 73.333333% { - -webkit-transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00006, 0, 0, 0, 0, 1, 0, 0, -0.00258, 0, 1); - transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00006, 0, 0, 0, 0, 1, 0, 0, -0.00258, 0, 1); - } - 75% { - -webkit-transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00005, 0, 0, 0, 0, 1, 0, 0, -0.00216, 0, 1); - transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00005, 0, 0, 0, 0, 1, 0, 0, -0.00216, 0, 1); - } - 76.666667% { - -webkit-transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00004, 0, 0, 0, 0, 1, 0, 0, -0.00172, 0, 1); - transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00004, 0, 0, 0, 0, 1, 0, 0, -0.00172, 0, 1); - } - 78.333333% { - -webkit-transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, -0.00131, 0, 1); - transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, -0.00131, 0, 1); - } - 80% { - -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00095, 0, 1); - transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00095, 0, 1); - } - 81.666667% { - -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00064, 0, 1); - transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00064, 0, 1); - } - 83.333333% { - -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, -0.00039, 0, 1); - transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, -0.00039, 0, 1); - } - 85% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0002, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0002, 0, 1); - } - 86.666667% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00005, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00005, 0, 1); - } - 88.333333% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00004, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00004, 0, 1); - } - 90% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00011, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00011, 0, 1); - } - 91.666667% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00014, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00014, 0, 1); - } - 93.333333% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00015, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00015, 0, 1); - } - 95% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00015, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00015, 0, 1); - } - 96.666667% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00014, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00014, 0, 1); - } - 98.333333% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00012, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00012, 0, 1); - } - 100% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + opacity: 1; + -webkit-transform: scale(1.05) translateY(-4px); } } @keyframes pop { 0% { - -webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 10, 0, 1); - transform: matrix3d(0.7, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 10, 0, 1); - } - 1.666667% { - -webkit-transform: matrix3d(0.76047, 0, 0, 0, 0, 0.60078, 0, 0, 0, 0, 1, 0, 0, 9.59374, 0, 1); - transform: matrix3d(0.76047, 0, 0, 0, 0, 0.60078, 0, 0, 0, 0, 1, 0, 0, 9.59374, 0, 1); - } - 3.333333% { - -webkit-transform: matrix3d(0.81739, 0, 0, 0, 0, 0.69565, 0, 0, 0, 0, 1, 0, 0, 8.46888, 0, 1); - transform: matrix3d(0.81739, 0, 0, 0, 0, 0.69565, 0, 0, 0, 0, 1, 0, 0, 8.46888, 0, 1); - } - 5% { - -webkit-transform: matrix3d(0.86799, 0, 0, 0, 0, 0.77999, 0, 0, 0, 0, 1, 0, 0, 6.86422, 0, 1); - transform: matrix3d(0.86799, 0, 0, 0, 0, 0.77999, 0, 0, 0, 0, 1, 0, 0, 6.86422, 0, 1); - } - 6.666667% { - -webkit-transform: matrix3d(0.91088, 0, 0, 0, 0, 0.85146, 0, 0, 0, 0, 1, 0, 0, 5.05894, 0, 1); - transform: matrix3d(0.91088, 0, 0, 0, 0, 0.85146, 0, 0, 0, 0, 1, 0, 0, 5.05894, 0, 1); - } - 8.333333% { - -webkit-transform: matrix3d(0.94564, 0, 0, 0, 0, 0.9094, 0, 0, 0, 0, 1, 0, 0, 3.29569, 0, 1); - transform: matrix3d(0.94564, 0, 0, 0, 0, 0.9094, 0, 0, 0, 0, 1, 0, 0, 3.29569, 0, 1); - } - 10% { - -webkit-transform: matrix3d(0.97258, 0, 0, 0, 0, 0.95429, 0, 0, 0, 0, 1, 0, 0, 1.74471, 0, 1); - transform: matrix3d(0.97258, 0, 0, 0, 0, 0.95429, 0, 0, 0, 0, 1, 0, 0, 1.74471, 0, 1); - } - 11.666667% { - -webkit-transform: matrix3d(0.99243, 0, 0, 0, 0, 0.98738, 0, 0, 0, 0, 1, 0, 0, 0.49844, 0, 1); - transform: matrix3d(0.99243, 0, 0, 0, 0, 0.98738, 0, 0, 0, 0, 1, 0, 0, 0.49844, 0, 1); - } - 13.333333% { - -webkit-transform: matrix3d(1.00618, 0, 0, 0, 0, 1.0103, 0, 0, 0, 0, 1, 0, 0, -0.41631, 0, 1); - transform: matrix3d(1.00618, 0, 0, 0, 0, 1.0103, 0, 0, 0, 0, 1, 0, 0, -0.41631, 0, 1); - } - 15% { - -webkit-transform: matrix3d(1.01492, 0, 0, 0, 0, 1.02486, 0, 0, 0, 0, 1, 0, 0, -1.01911, 0, 1); - transform: matrix3d(1.01492, 0, 0, 0, 0, 1.02486, 0, 0, 0, 0, 1, 0, 0, -1.01911, 0, 1); - } - 16.666667% { - -webkit-transform: matrix3d(1.0197, 0, 0, 0, 0, 1.03283, 0, 0, 0, 0, 1, 0, 0, -1.35648, 0, 1); - transform: matrix3d(1.0197, 0, 0, 0, 0, 1.03283, 0, 0, 0, 0, 1, 0, 0, -1.35648, 0, 1); - } - 18.333333% { - -webkit-transform: matrix3d(1.02152, 0, 0, 0, 0, 1.03587, 0, 0, 0, 0, 1, 0, 0, -1.48616, 0, 1); - transform: matrix3d(1.02152, 0, 0, 0, 0, 1.03587, 0, 0, 0, 0, 1, 0, 0, -1.48616, 0, 1); - } - 20% { - -webkit-transform: matrix3d(1.02124, 0, 0, 0, 0, 1.0354, 0, 0, 0, 0, 1, 0, 0, -1.46607, 0, 1); - transform: matrix3d(1.02124, 0, 0, 0, 0, 1.0354, 0, 0, 0, 0, 1, 0, 0, -1.46607, 0, 1); - } - 21.666667% { - -webkit-transform: matrix3d(1.01958, 0, 0, 0, 0, 1.03263, 0, 0, 0, 0, 1, 0, 0, -1.34772, 0, 1); - transform: matrix3d(1.01958, 0, 0, 0, 0, 1.03263, 0, 0, 0, 0, 1, 0, 0, -1.34772, 0, 1); - } - 23.333333% { - -webkit-transform: matrix3d(1.01711, 0, 0, 0, 0, 1.02852, 0, 0, 0, 0, 1, 0, 0, -1.17322, 0, 1); - transform: matrix3d(1.01711, 0, 0, 0, 0, 1.02852, 0, 0, 0, 0, 1, 0, 0, -1.17322, 0, 1); - } - 25% { - -webkit-transform: matrix3d(1.01428, 0, 0, 0, 0, 1.0238, 0, 0, 0, 0, 1, 0, 0, -0.97458, 0, 1); - transform: matrix3d(1.01428, 0, 0, 0, 0, 1.0238, 0, 0, 0, 0, 1, 0, 0, -0.97458, 0, 1); - } - 26.666667% { - -webkit-transform: matrix3d(1.0114, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, -0.7745, 0, 1); - transform: matrix3d(1.0114, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, -0.7745, 0, 1); - } - 28.333333% { - -webkit-transform: matrix3d(1.00869, 0, 0, 0, 0, 1.01449, 0, 0, 0, 0, 1, 0, 0, -0.58784, 0, 1); - transform: matrix3d(1.00869, 0, 0, 0, 0, 1.01449, 0, 0, 0, 0, 1, 0, 0, -0.58784, 0, 1); - } - 30% { - -webkit-transform: matrix3d(1.00628, 0, 0, 0, 0, 1.01047, 0, 0, 0, 0, 1, 0, 0, -0.42325, 0, 1); - transform: matrix3d(1.00628, 0, 0, 0, 0, 1.01047, 0, 0, 0, 0, 1, 0, 0, -0.42325, 0, 1); - } - 31.666667% { - -webkit-transform: matrix3d(1.00424, 0, 0, 0, 0, 1.00707, 0, 0, 0, 0, 1, 0, 0, -0.28479, 0, 1); - transform: matrix3d(1.00424, 0, 0, 0, 0, 1.00707, 0, 0, 0, 0, 1, 0, 0, -0.28479, 0, 1); - } - 33.333333% { - -webkit-transform: matrix3d(1.00259, 0, 0, 0, 0, 1.00431, 0, 0, 0, 0, 1, 0, 0, -0.17323, 0, 1); - transform: matrix3d(1.00259, 0, 0, 0, 0, 1.00431, 0, 0, 0, 0, 1, 0, 0, -0.17323, 0, 1); - } - 35% { - -webkit-transform: matrix3d(1.00131, 0, 0, 0, 0, 1.00218, 0, 0, 0, 0, 1, 0, 0, -0.08721, 0, 1); - transform: matrix3d(1.00131, 0, 0, 0, 0, 1.00218, 0, 0, 0, 0, 1, 0, 0, -0.08721, 0, 1); - } - 36.666667% { - -webkit-transform: matrix3d(1.00036, 0, 0, 0, 0, 1.0006, 0, 0, 0, 0, 1, 0, 0, -0.02404, 0, 1); - transform: matrix3d(1.00036, 0, 0, 0, 0, 1.0006, 0, 0, 0, 0, 1, 0, 0, -0.02404, 0, 1); - } - 38.333333% { - -webkit-transform: matrix3d(0.99971, 0, 0, 0, 0, 0.99951, 0, 0, 0, 0, 1, 0, 0, 0.0196, 0, 1); - transform: matrix3d(0.99971, 0, 0, 0, 0, 0.99951, 0, 0, 0, 0, 1, 0, 0, 0.0196, 0, 1); - } - 40% { - -webkit-transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99882, 0, 0, 0, 0, 1, 0, 0, 0.04727, 0, 1); - transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99882, 0, 0, 0, 0, 1, 0, 0, 0.04727, 0, 1); - } - 41.666667% { - -webkit-transform: matrix3d(0.99906, 0, 0, 0, 0, 0.99844, 0, 0, 0, 0, 1, 0, 0, 0.06241, 0, 1); - transform: matrix3d(0.99906, 0, 0, 0, 0, 0.99844, 0, 0, 0, 0, 1, 0, 0, 0.06241, 0, 1); - } - 43.333333% { - -webkit-transform: matrix3d(0.99898, 0, 0, 0, 0, 0.99829, 0, 0, 0, 0, 1, 0, 0, 0.06817, 0, 1); - transform: matrix3d(0.99898, 0, 0, 0, 0, 0.99829, 0, 0, 0, 0, 1, 0, 0, 0.06817, 0, 1); - } - 45% { - -webkit-transform: matrix3d(0.99899, 0, 0, 0, 0, 0.99832, 0, 0, 0, 0, 1, 0, 0, 0.06728, 0, 1); - transform: matrix3d(0.99899, 0, 0, 0, 0, 0.99832, 0, 0, 0, 0, 1, 0, 0, 0.06728, 0, 1); - } - 46.666667% { - -webkit-transform: matrix3d(0.99907, 0, 0, 0, 0, 0.99845, 0, 0, 0, 0, 1, 0, 0, 0.06202, 0, 1); - transform: matrix3d(0.99907, 0, 0, 0, 0, 0.99845, 0, 0, 0, 0, 1, 0, 0, 0.06202, 0, 1); - } - 48.333333% { - -webkit-transform: matrix3d(0.99919, 0, 0, 0, 0, 0.99864, 0, 0, 0, 0, 1, 0, 0, 0.05422, 0, 1); - transform: matrix3d(0.99919, 0, 0, 0, 0, 0.99864, 0, 0, 0, 0, 1, 0, 0, 0.05422, 0, 1); + opacity: 0.8; + transform: scale(0.9) translateY(14px); } 50% { - -webkit-transform: matrix3d(0.99932, 0, 0, 0, 0, 0.99887, 0, 0, 0, 0, 1, 0, 0, 0.04526, 0, 1); - transform: matrix3d(0.99932, 0, 0, 0, 0, 0.99887, 0, 0, 0, 0, 1, 0, 0, 0.04526, 0, 1); - } - 51.666667% { - -webkit-transform: matrix3d(0.99946, 0, 0, 0, 0, 0.9991, 0, 0, 0, 0, 1, 0, 0, 0.03614, 0, 1); - transform: matrix3d(0.99946, 0, 0, 0, 0, 0.9991, 0, 0, 0, 0, 1, 0, 0, 0.03614, 0, 1); - } - 53.333333% { - -webkit-transform: matrix3d(0.99959, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0.02756, 0, 1); - transform: matrix3d(0.99959, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0.02756, 0, 1); - } - 55% { - -webkit-transform: matrix3d(0.9997, 0, 0, 0, 0, 0.9995, 0, 0, 0, 0, 1, 0, 0, 0.01993, 0, 1); - transform: matrix3d(0.9997, 0, 0, 0, 0, 0.9995, 0, 0, 0, 0, 1, 0, 0, 0.01993, 0, 1); - } - 56.666667% { - -webkit-transform: matrix3d(0.9998, 0, 0, 0, 0, 0.99966, 0, 0, 0, 0, 1, 0, 0, 0.01346, 0, 1); - transform: matrix3d(0.9998, 0, 0, 0, 0, 0.99966, 0, 0, 0, 0, 1, 0, 0, 0.01346, 0, 1); - } - 58.333333% { - -webkit-transform: matrix3d(0.99988, 0, 0, 0, 0, 0.99979, 0, 0, 0, 0, 1, 0, 0, 0.00821, 0, 1); - transform: matrix3d(0.99988, 0, 0, 0, 0, 0.99979, 0, 0, 0, 0, 1, 0, 0, 0.00821, 0, 1); - } - 60% { - -webkit-transform: matrix3d(0.99994, 0, 0, 0, 0, 0.9999, 0, 0, 0, 0, 1, 0, 0, 0.00414, 0, 1); - transform: matrix3d(0.99994, 0, 0, 0, 0, 0.9999, 0, 0, 0, 0, 1, 0, 0, 0.00414, 0, 1); - } - 61.666667% { - -webkit-transform: matrix3d(0.99998, 0, 0, 0, 0, 0.99997, 0, 0, 0, 0, 1, 0, 0, 0.00114, 0, 1); - transform: matrix3d(0.99998, 0, 0, 0, 0, 0.99997, 0, 0, 0, 0, 1, 0, 0, 0.00114, 0, 1); - } - 63.333333% { - -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00093, 0, 1); - transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00093, 0, 1); - } - 65% { - -webkit-transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00006, 0, 0, 0, 0, 1, 0, 0, -0.00225, 0, 1); - transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00006, 0, 0, 0, 0, 1, 0, 0, -0.00225, 0, 1); - } - 66.666667% { - -webkit-transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, -0.00298, 0, 1); - transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, -0.00298, 0, 1); - } - 68.333333% { - -webkit-transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00008, 0, 0, 0, 0, 1, 0, 0, -0.00325, 0, 1); - transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00008, 0, 0, 0, 0, 1, 0, 0, -0.00325, 0, 1); - } - 70% { - -webkit-transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00008, 0, 0, 0, 0, 1, 0, 0, -0.00321, 0, 1); - transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00008, 0, 0, 0, 0, 1, 0, 0, -0.00321, 0, 1); - } - 71.666667% { - -webkit-transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, -0.00296, 0, 1); - transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, -0.00296, 0, 1); - } - 73.333333% { - -webkit-transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00006, 0, 0, 0, 0, 1, 0, 0, -0.00258, 0, 1); - transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00006, 0, 0, 0, 0, 1, 0, 0, -0.00258, 0, 1); - } - 75% { - -webkit-transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00005, 0, 0, 0, 0, 1, 0, 0, -0.00216, 0, 1); - transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00005, 0, 0, 0, 0, 1, 0, 0, -0.00216, 0, 1); - } - 76.666667% { - -webkit-transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00004, 0, 0, 0, 0, 1, 0, 0, -0.00172, 0, 1); - transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00004, 0, 0, 0, 0, 1, 0, 0, -0.00172, 0, 1); - } - 78.333333% { - -webkit-transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, -0.00131, 0, 1); - transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, -0.00131, 0, 1); - } - 80% { - -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00095, 0, 1); - transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00095, 0, 1); - } - 81.666667% { - -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00064, 0, 1); - transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00064, 0, 1); - } - 83.333333% { - -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, -0.00039, 0, 1); - transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, -0.00039, 0, 1); - } - 85% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0002, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0002, 0, 1); - } - 86.666667% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00005, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00005, 0, 1); - } - 88.333333% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00004, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00004, 0, 1); - } - 90% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00011, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00011, 0, 1); - } - 91.666667% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00014, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00014, 0, 1); - } - 93.333333% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00015, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00015, 0, 1); - } - 95% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00015, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00015, 0, 1); - } - 96.666667% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00014, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00014, 0, 1); - } - 98.333333% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00012, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00012, 0, 1); - } - 100% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + opacity: 1; + transform: scale(1.05) translateY(-4px); } } diff --git a/src/css/animations.less b/src/css/animations.less index 7b1b9f206..828e05278 100644 --- a/src/css/animations.less +++ b/src/css/animations.less @@ -34,131 +34,13 @@ 100% { background-position: 288px 0; } } -/* Generated with Bounce.js. Edit at http://goo.gl/kRKkQd */ @-webkit-keyframes pop { - 0% { -webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 10, 0, 1); transform: matrix3d(0.7, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 10, 0, 1); } - 1.666667% { -webkit-transform: matrix3d(0.76047, 0, 0, 0, 0, 0.60078, 0, 0, 0, 0, 1, 0, 0, 9.59374, 0, 1); transform: matrix3d(0.76047, 0, 0, 0, 0, 0.60078, 0, 0, 0, 0, 1, 0, 0, 9.59374, 0, 1); } - 3.333333% { -webkit-transform: matrix3d(0.81739, 0, 0, 0, 0, 0.69565, 0, 0, 0, 0, 1, 0, 0, 8.46888, 0, 1); transform: matrix3d(0.81739, 0, 0, 0, 0, 0.69565, 0, 0, 0, 0, 1, 0, 0, 8.46888, 0, 1); } - 5% { -webkit-transform: matrix3d(0.86799, 0, 0, 0, 0, 0.77999, 0, 0, 0, 0, 1, 0, 0, 6.86422, 0, 1); transform: matrix3d(0.86799, 0, 0, 0, 0, 0.77999, 0, 0, 0, 0, 1, 0, 0, 6.86422, 0, 1); } - 6.666667% { -webkit-transform: matrix3d(0.91088, 0, 0, 0, 0, 0.85146, 0, 0, 0, 0, 1, 0, 0, 5.05894, 0, 1); transform: matrix3d(0.91088, 0, 0, 0, 0, 0.85146, 0, 0, 0, 0, 1, 0, 0, 5.05894, 0, 1); } - 8.333333% { -webkit-transform: matrix3d(0.94564, 0, 0, 0, 0, 0.9094, 0, 0, 0, 0, 1, 0, 0, 3.29569, 0, 1); transform: matrix3d(0.94564, 0, 0, 0, 0, 0.9094, 0, 0, 0, 0, 1, 0, 0, 3.29569, 0, 1); } - 10% { -webkit-transform: matrix3d(0.97258, 0, 0, 0, 0, 0.95429, 0, 0, 0, 0, 1, 0, 0, 1.74471, 0, 1); transform: matrix3d(0.97258, 0, 0, 0, 0, 0.95429, 0, 0, 0, 0, 1, 0, 0, 1.74471, 0, 1); } - 11.666667% { -webkit-transform: matrix3d(0.99243, 0, 0, 0, 0, 0.98738, 0, 0, 0, 0, 1, 0, 0, 0.49844, 0, 1); transform: matrix3d(0.99243, 0, 0, 0, 0, 0.98738, 0, 0, 0, 0, 1, 0, 0, 0.49844, 0, 1); } - 13.333333% { -webkit-transform: matrix3d(1.00618, 0, 0, 0, 0, 1.0103, 0, 0, 0, 0, 1, 0, 0, -0.41631, 0, 1); transform: matrix3d(1.00618, 0, 0, 0, 0, 1.0103, 0, 0, 0, 0, 1, 0, 0, -0.41631, 0, 1); } - 15% { -webkit-transform: matrix3d(1.01492, 0, 0, 0, 0, 1.02486, 0, 0, 0, 0, 1, 0, 0, -1.01911, 0, 1); transform: matrix3d(1.01492, 0, 0, 0, 0, 1.02486, 0, 0, 0, 0, 1, 0, 0, -1.01911, 0, 1); } - 16.666667% { -webkit-transform: matrix3d(1.0197, 0, 0, 0, 0, 1.03283, 0, 0, 0, 0, 1, 0, 0, -1.35648, 0, 1); transform: matrix3d(1.0197, 0, 0, 0, 0, 1.03283, 0, 0, 0, 0, 1, 0, 0, -1.35648, 0, 1); } - 18.333333% { -webkit-transform: matrix3d(1.02152, 0, 0, 0, 0, 1.03587, 0, 0, 0, 0, 1, 0, 0, -1.48616, 0, 1); transform: matrix3d(1.02152, 0, 0, 0, 0, 1.03587, 0, 0, 0, 0, 1, 0, 0, -1.48616, 0, 1); } - 20% { -webkit-transform: matrix3d(1.02124, 0, 0, 0, 0, 1.0354, 0, 0, 0, 0, 1, 0, 0, -1.46607, 0, 1); transform: matrix3d(1.02124, 0, 0, 0, 0, 1.0354, 0, 0, 0, 0, 1, 0, 0, -1.46607, 0, 1); } - 21.666667% { -webkit-transform: matrix3d(1.01958, 0, 0, 0, 0, 1.03263, 0, 0, 0, 0, 1, 0, 0, -1.34772, 0, 1); transform: matrix3d(1.01958, 0, 0, 0, 0, 1.03263, 0, 0, 0, 0, 1, 0, 0, -1.34772, 0, 1); } - 23.333333% { -webkit-transform: matrix3d(1.01711, 0, 0, 0, 0, 1.02852, 0, 0, 0, 0, 1, 0, 0, -1.17322, 0, 1); transform: matrix3d(1.01711, 0, 0, 0, 0, 1.02852, 0, 0, 0, 0, 1, 0, 0, -1.17322, 0, 1); } - 25% { -webkit-transform: matrix3d(1.01428, 0, 0, 0, 0, 1.0238, 0, 0, 0, 0, 1, 0, 0, -0.97458, 0, 1); transform: matrix3d(1.01428, 0, 0, 0, 0, 1.0238, 0, 0, 0, 0, 1, 0, 0, -0.97458, 0, 1); } - 26.666667% { -webkit-transform: matrix3d(1.0114, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, -0.7745, 0, 1); transform: matrix3d(1.0114, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, -0.7745, 0, 1); } - 28.333333% { -webkit-transform: matrix3d(1.00869, 0, 0, 0, 0, 1.01449, 0, 0, 0, 0, 1, 0, 0, -0.58784, 0, 1); transform: matrix3d(1.00869, 0, 0, 0, 0, 1.01449, 0, 0, 0, 0, 1, 0, 0, -0.58784, 0, 1); } - 30% { -webkit-transform: matrix3d(1.00628, 0, 0, 0, 0, 1.01047, 0, 0, 0, 0, 1, 0, 0, -0.42325, 0, 1); transform: matrix3d(1.00628, 0, 0, 0, 0, 1.01047, 0, 0, 0, 0, 1, 0, 0, -0.42325, 0, 1); } - 31.666667% { -webkit-transform: matrix3d(1.00424, 0, 0, 0, 0, 1.00707, 0, 0, 0, 0, 1, 0, 0, -0.28479, 0, 1); transform: matrix3d(1.00424, 0, 0, 0, 0, 1.00707, 0, 0, 0, 0, 1, 0, 0, -0.28479, 0, 1); } - 33.333333% { -webkit-transform: matrix3d(1.00259, 0, 0, 0, 0, 1.00431, 0, 0, 0, 0, 1, 0, 0, -0.17323, 0, 1); transform: matrix3d(1.00259, 0, 0, 0, 0, 1.00431, 0, 0, 0, 0, 1, 0, 0, -0.17323, 0, 1); } - 35% { -webkit-transform: matrix3d(1.00131, 0, 0, 0, 0, 1.00218, 0, 0, 0, 0, 1, 0, 0, -0.08721, 0, 1); transform: matrix3d(1.00131, 0, 0, 0, 0, 1.00218, 0, 0, 0, 0, 1, 0, 0, -0.08721, 0, 1); } - 36.666667% { -webkit-transform: matrix3d(1.00036, 0, 0, 0, 0, 1.0006, 0, 0, 0, 0, 1, 0, 0, -0.02404, 0, 1); transform: matrix3d(1.00036, 0, 0, 0, 0, 1.0006, 0, 0, 0, 0, 1, 0, 0, -0.02404, 0, 1); } - 38.333333% { -webkit-transform: matrix3d(0.99971, 0, 0, 0, 0, 0.99951, 0, 0, 0, 0, 1, 0, 0, 0.0196, 0, 1); transform: matrix3d(0.99971, 0, 0, 0, 0, 0.99951, 0, 0, 0, 0, 1, 0, 0, 0.0196, 0, 1); } - 40% { -webkit-transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99882, 0, 0, 0, 0, 1, 0, 0, 0.04727, 0, 1); transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99882, 0, 0, 0, 0, 1, 0, 0, 0.04727, 0, 1); } - 41.666667% { -webkit-transform: matrix3d(0.99906, 0, 0, 0, 0, 0.99844, 0, 0, 0, 0, 1, 0, 0, 0.06241, 0, 1); transform: matrix3d(0.99906, 0, 0, 0, 0, 0.99844, 0, 0, 0, 0, 1, 0, 0, 0.06241, 0, 1); } - 43.333333% { -webkit-transform: matrix3d(0.99898, 0, 0, 0, 0, 0.99829, 0, 0, 0, 0, 1, 0, 0, 0.06817, 0, 1); transform: matrix3d(0.99898, 0, 0, 0, 0, 0.99829, 0, 0, 0, 0, 1, 0, 0, 0.06817, 0, 1); } - 45% { -webkit-transform: matrix3d(0.99899, 0, 0, 0, 0, 0.99832, 0, 0, 0, 0, 1, 0, 0, 0.06728, 0, 1); transform: matrix3d(0.99899, 0, 0, 0, 0, 0.99832, 0, 0, 0, 0, 1, 0, 0, 0.06728, 0, 1); } - 46.666667% { -webkit-transform: matrix3d(0.99907, 0, 0, 0, 0, 0.99845, 0, 0, 0, 0, 1, 0, 0, 0.06202, 0, 1); transform: matrix3d(0.99907, 0, 0, 0, 0, 0.99845, 0, 0, 0, 0, 1, 0, 0, 0.06202, 0, 1); } - 48.333333% { -webkit-transform: matrix3d(0.99919, 0, 0, 0, 0, 0.99864, 0, 0, 0, 0, 1, 0, 0, 0.05422, 0, 1); transform: matrix3d(0.99919, 0, 0, 0, 0, 0.99864, 0, 0, 0, 0, 1, 0, 0, 0.05422, 0, 1); } - 50% { -webkit-transform: matrix3d(0.99932, 0, 0, 0, 0, 0.99887, 0, 0, 0, 0, 1, 0, 0, 0.04526, 0, 1); transform: matrix3d(0.99932, 0, 0, 0, 0, 0.99887, 0, 0, 0, 0, 1, 0, 0, 0.04526, 0, 1); } - 51.666667% { -webkit-transform: matrix3d(0.99946, 0, 0, 0, 0, 0.9991, 0, 0, 0, 0, 1, 0, 0, 0.03614, 0, 1); transform: matrix3d(0.99946, 0, 0, 0, 0, 0.9991, 0, 0, 0, 0, 1, 0, 0, 0.03614, 0, 1); } - 53.333333% { -webkit-transform: matrix3d(0.99959, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0.02756, 0, 1); transform: matrix3d(0.99959, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0.02756, 0, 1); } - 55% { -webkit-transform: matrix3d(0.9997, 0, 0, 0, 0, 0.9995, 0, 0, 0, 0, 1, 0, 0, 0.01993, 0, 1); transform: matrix3d(0.9997, 0, 0, 0, 0, 0.9995, 0, 0, 0, 0, 1, 0, 0, 0.01993, 0, 1); } - 56.666667% { -webkit-transform: matrix3d(0.9998, 0, 0, 0, 0, 0.99966, 0, 0, 0, 0, 1, 0, 0, 0.01346, 0, 1); transform: matrix3d(0.9998, 0, 0, 0, 0, 0.99966, 0, 0, 0, 0, 1, 0, 0, 0.01346, 0, 1); } - 58.333333% { -webkit-transform: matrix3d(0.99988, 0, 0, 0, 0, 0.99979, 0, 0, 0, 0, 1, 0, 0, 0.00821, 0, 1); transform: matrix3d(0.99988, 0, 0, 0, 0, 0.99979, 0, 0, 0, 0, 1, 0, 0, 0.00821, 0, 1); } - 60% { -webkit-transform: matrix3d(0.99994, 0, 0, 0, 0, 0.9999, 0, 0, 0, 0, 1, 0, 0, 0.00414, 0, 1); transform: matrix3d(0.99994, 0, 0, 0, 0, 0.9999, 0, 0, 0, 0, 1, 0, 0, 0.00414, 0, 1); } - 61.666667% { -webkit-transform: matrix3d(0.99998, 0, 0, 0, 0, 0.99997, 0, 0, 0, 0, 1, 0, 0, 0.00114, 0, 1); transform: matrix3d(0.99998, 0, 0, 0, 0, 0.99997, 0, 0, 0, 0, 1, 0, 0, 0.00114, 0, 1); } - 63.333333% { -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00093, 0, 1); transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00093, 0, 1); } - 65% { -webkit-transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00006, 0, 0, 0, 0, 1, 0, 0, -0.00225, 0, 1); transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00006, 0, 0, 0, 0, 1, 0, 0, -0.00225, 0, 1); } - 66.666667% { -webkit-transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, -0.00298, 0, 1); transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, -0.00298, 0, 1); } - 68.333333% { -webkit-transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00008, 0, 0, 0, 0, 1, 0, 0, -0.00325, 0, 1); transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00008, 0, 0, 0, 0, 1, 0, 0, -0.00325, 0, 1); } - 70% { -webkit-transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00008, 0, 0, 0, 0, 1, 0, 0, -0.00321, 0, 1); transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00008, 0, 0, 0, 0, 1, 0, 0, -0.00321, 0, 1); } - 71.666667% { -webkit-transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, -0.00296, 0, 1); transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, -0.00296, 0, 1); } - 73.333333% { -webkit-transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00006, 0, 0, 0, 0, 1, 0, 0, -0.00258, 0, 1); transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00006, 0, 0, 0, 0, 1, 0, 0, -0.00258, 0, 1); } - 75% { -webkit-transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00005, 0, 0, 0, 0, 1, 0, 0, -0.00216, 0, 1); transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00005, 0, 0, 0, 0, 1, 0, 0, -0.00216, 0, 1); } - 76.666667% { -webkit-transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00004, 0, 0, 0, 0, 1, 0, 0, -0.00172, 0, 1); transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00004, 0, 0, 0, 0, 1, 0, 0, -0.00172, 0, 1); } - 78.333333% { -webkit-transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, -0.00131, 0, 1); transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, -0.00131, 0, 1); } - 80% { -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00095, 0, 1); transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00095, 0, 1); } - 81.666667% { -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00064, 0, 1); transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00064, 0, 1); } - 83.333333% { -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, -0.00039, 0, 1); transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, -0.00039, 0, 1); } - 85% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0002, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0002, 0, 1); } - 86.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00005, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00005, 0, 1); } - 88.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00004, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00004, 0, 1); } - 90% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00011, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00011, 0, 1); } - 91.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00014, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00014, 0, 1); } - 93.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00015, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00015, 0, 1); } - 95% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00015, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00015, 0, 1); } - 96.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00014, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00014, 0, 1); } - 98.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00012, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00012, 0, 1); } - 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } + 0% { opacity: 0.8; -webkit-transform: scale(0.9) translateY(14px); } + 50% { opacity: 1; -webkit-transform: scale(1.05) translateY(-4px); } + 100% { } } - @keyframes pop { - 0% { -webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 10, 0, 1); transform: matrix3d(0.7, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 10, 0, 1); } - 1.666667% { -webkit-transform: matrix3d(0.76047, 0, 0, 0, 0, 0.60078, 0, 0, 0, 0, 1, 0, 0, 9.59374, 0, 1); transform: matrix3d(0.76047, 0, 0, 0, 0, 0.60078, 0, 0, 0, 0, 1, 0, 0, 9.59374, 0, 1); } - 3.333333% { -webkit-transform: matrix3d(0.81739, 0, 0, 0, 0, 0.69565, 0, 0, 0, 0, 1, 0, 0, 8.46888, 0, 1); transform: matrix3d(0.81739, 0, 0, 0, 0, 0.69565, 0, 0, 0, 0, 1, 0, 0, 8.46888, 0, 1); } - 5% { -webkit-transform: matrix3d(0.86799, 0, 0, 0, 0, 0.77999, 0, 0, 0, 0, 1, 0, 0, 6.86422, 0, 1); transform: matrix3d(0.86799, 0, 0, 0, 0, 0.77999, 0, 0, 0, 0, 1, 0, 0, 6.86422, 0, 1); } - 6.666667% { -webkit-transform: matrix3d(0.91088, 0, 0, 0, 0, 0.85146, 0, 0, 0, 0, 1, 0, 0, 5.05894, 0, 1); transform: matrix3d(0.91088, 0, 0, 0, 0, 0.85146, 0, 0, 0, 0, 1, 0, 0, 5.05894, 0, 1); } - 8.333333% { -webkit-transform: matrix3d(0.94564, 0, 0, 0, 0, 0.9094, 0, 0, 0, 0, 1, 0, 0, 3.29569, 0, 1); transform: matrix3d(0.94564, 0, 0, 0, 0, 0.9094, 0, 0, 0, 0, 1, 0, 0, 3.29569, 0, 1); } - 10% { -webkit-transform: matrix3d(0.97258, 0, 0, 0, 0, 0.95429, 0, 0, 0, 0, 1, 0, 0, 1.74471, 0, 1); transform: matrix3d(0.97258, 0, 0, 0, 0, 0.95429, 0, 0, 0, 0, 1, 0, 0, 1.74471, 0, 1); } - 11.666667% { -webkit-transform: matrix3d(0.99243, 0, 0, 0, 0, 0.98738, 0, 0, 0, 0, 1, 0, 0, 0.49844, 0, 1); transform: matrix3d(0.99243, 0, 0, 0, 0, 0.98738, 0, 0, 0, 0, 1, 0, 0, 0.49844, 0, 1); } - 13.333333% { -webkit-transform: matrix3d(1.00618, 0, 0, 0, 0, 1.0103, 0, 0, 0, 0, 1, 0, 0, -0.41631, 0, 1); transform: matrix3d(1.00618, 0, 0, 0, 0, 1.0103, 0, 0, 0, 0, 1, 0, 0, -0.41631, 0, 1); } - 15% { -webkit-transform: matrix3d(1.01492, 0, 0, 0, 0, 1.02486, 0, 0, 0, 0, 1, 0, 0, -1.01911, 0, 1); transform: matrix3d(1.01492, 0, 0, 0, 0, 1.02486, 0, 0, 0, 0, 1, 0, 0, -1.01911, 0, 1); } - 16.666667% { -webkit-transform: matrix3d(1.0197, 0, 0, 0, 0, 1.03283, 0, 0, 0, 0, 1, 0, 0, -1.35648, 0, 1); transform: matrix3d(1.0197, 0, 0, 0, 0, 1.03283, 0, 0, 0, 0, 1, 0, 0, -1.35648, 0, 1); } - 18.333333% { -webkit-transform: matrix3d(1.02152, 0, 0, 0, 0, 1.03587, 0, 0, 0, 0, 1, 0, 0, -1.48616, 0, 1); transform: matrix3d(1.02152, 0, 0, 0, 0, 1.03587, 0, 0, 0, 0, 1, 0, 0, -1.48616, 0, 1); } - 20% { -webkit-transform: matrix3d(1.02124, 0, 0, 0, 0, 1.0354, 0, 0, 0, 0, 1, 0, 0, -1.46607, 0, 1); transform: matrix3d(1.02124, 0, 0, 0, 0, 1.0354, 0, 0, 0, 0, 1, 0, 0, -1.46607, 0, 1); } - 21.666667% { -webkit-transform: matrix3d(1.01958, 0, 0, 0, 0, 1.03263, 0, 0, 0, 0, 1, 0, 0, -1.34772, 0, 1); transform: matrix3d(1.01958, 0, 0, 0, 0, 1.03263, 0, 0, 0, 0, 1, 0, 0, -1.34772, 0, 1); } - 23.333333% { -webkit-transform: matrix3d(1.01711, 0, 0, 0, 0, 1.02852, 0, 0, 0, 0, 1, 0, 0, -1.17322, 0, 1); transform: matrix3d(1.01711, 0, 0, 0, 0, 1.02852, 0, 0, 0, 0, 1, 0, 0, -1.17322, 0, 1); } - 25% { -webkit-transform: matrix3d(1.01428, 0, 0, 0, 0, 1.0238, 0, 0, 0, 0, 1, 0, 0, -0.97458, 0, 1); transform: matrix3d(1.01428, 0, 0, 0, 0, 1.0238, 0, 0, 0, 0, 1, 0, 0, -0.97458, 0, 1); } - 26.666667% { -webkit-transform: matrix3d(1.0114, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, -0.7745, 0, 1); transform: matrix3d(1.0114, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, -0.7745, 0, 1); } - 28.333333% { -webkit-transform: matrix3d(1.00869, 0, 0, 0, 0, 1.01449, 0, 0, 0, 0, 1, 0, 0, -0.58784, 0, 1); transform: matrix3d(1.00869, 0, 0, 0, 0, 1.01449, 0, 0, 0, 0, 1, 0, 0, -0.58784, 0, 1); } - 30% { -webkit-transform: matrix3d(1.00628, 0, 0, 0, 0, 1.01047, 0, 0, 0, 0, 1, 0, 0, -0.42325, 0, 1); transform: matrix3d(1.00628, 0, 0, 0, 0, 1.01047, 0, 0, 0, 0, 1, 0, 0, -0.42325, 0, 1); } - 31.666667% { -webkit-transform: matrix3d(1.00424, 0, 0, 0, 0, 1.00707, 0, 0, 0, 0, 1, 0, 0, -0.28479, 0, 1); transform: matrix3d(1.00424, 0, 0, 0, 0, 1.00707, 0, 0, 0, 0, 1, 0, 0, -0.28479, 0, 1); } - 33.333333% { -webkit-transform: matrix3d(1.00259, 0, 0, 0, 0, 1.00431, 0, 0, 0, 0, 1, 0, 0, -0.17323, 0, 1); transform: matrix3d(1.00259, 0, 0, 0, 0, 1.00431, 0, 0, 0, 0, 1, 0, 0, -0.17323, 0, 1); } - 35% { -webkit-transform: matrix3d(1.00131, 0, 0, 0, 0, 1.00218, 0, 0, 0, 0, 1, 0, 0, -0.08721, 0, 1); transform: matrix3d(1.00131, 0, 0, 0, 0, 1.00218, 0, 0, 0, 0, 1, 0, 0, -0.08721, 0, 1); } - 36.666667% { -webkit-transform: matrix3d(1.00036, 0, 0, 0, 0, 1.0006, 0, 0, 0, 0, 1, 0, 0, -0.02404, 0, 1); transform: matrix3d(1.00036, 0, 0, 0, 0, 1.0006, 0, 0, 0, 0, 1, 0, 0, -0.02404, 0, 1); } - 38.333333% { -webkit-transform: matrix3d(0.99971, 0, 0, 0, 0, 0.99951, 0, 0, 0, 0, 1, 0, 0, 0.0196, 0, 1); transform: matrix3d(0.99971, 0, 0, 0, 0, 0.99951, 0, 0, 0, 0, 1, 0, 0, 0.0196, 0, 1); } - 40% { -webkit-transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99882, 0, 0, 0, 0, 1, 0, 0, 0.04727, 0, 1); transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99882, 0, 0, 0, 0, 1, 0, 0, 0.04727, 0, 1); } - 41.666667% { -webkit-transform: matrix3d(0.99906, 0, 0, 0, 0, 0.99844, 0, 0, 0, 0, 1, 0, 0, 0.06241, 0, 1); transform: matrix3d(0.99906, 0, 0, 0, 0, 0.99844, 0, 0, 0, 0, 1, 0, 0, 0.06241, 0, 1); } - 43.333333% { -webkit-transform: matrix3d(0.99898, 0, 0, 0, 0, 0.99829, 0, 0, 0, 0, 1, 0, 0, 0.06817, 0, 1); transform: matrix3d(0.99898, 0, 0, 0, 0, 0.99829, 0, 0, 0, 0, 1, 0, 0, 0.06817, 0, 1); } - 45% { -webkit-transform: matrix3d(0.99899, 0, 0, 0, 0, 0.99832, 0, 0, 0, 0, 1, 0, 0, 0.06728, 0, 1); transform: matrix3d(0.99899, 0, 0, 0, 0, 0.99832, 0, 0, 0, 0, 1, 0, 0, 0.06728, 0, 1); } - 46.666667% { -webkit-transform: matrix3d(0.99907, 0, 0, 0, 0, 0.99845, 0, 0, 0, 0, 1, 0, 0, 0.06202, 0, 1); transform: matrix3d(0.99907, 0, 0, 0, 0, 0.99845, 0, 0, 0, 0, 1, 0, 0, 0.06202, 0, 1); } - 48.333333% { -webkit-transform: matrix3d(0.99919, 0, 0, 0, 0, 0.99864, 0, 0, 0, 0, 1, 0, 0, 0.05422, 0, 1); transform: matrix3d(0.99919, 0, 0, 0, 0, 0.99864, 0, 0, 0, 0, 1, 0, 0, 0.05422, 0, 1); } - 50% { -webkit-transform: matrix3d(0.99932, 0, 0, 0, 0, 0.99887, 0, 0, 0, 0, 1, 0, 0, 0.04526, 0, 1); transform: matrix3d(0.99932, 0, 0, 0, 0, 0.99887, 0, 0, 0, 0, 1, 0, 0, 0.04526, 0, 1); } - 51.666667% { -webkit-transform: matrix3d(0.99946, 0, 0, 0, 0, 0.9991, 0, 0, 0, 0, 1, 0, 0, 0.03614, 0, 1); transform: matrix3d(0.99946, 0, 0, 0, 0, 0.9991, 0, 0, 0, 0, 1, 0, 0, 0.03614, 0, 1); } - 53.333333% { -webkit-transform: matrix3d(0.99959, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0.02756, 0, 1); transform: matrix3d(0.99959, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0.02756, 0, 1); } - 55% { -webkit-transform: matrix3d(0.9997, 0, 0, 0, 0, 0.9995, 0, 0, 0, 0, 1, 0, 0, 0.01993, 0, 1); transform: matrix3d(0.9997, 0, 0, 0, 0, 0.9995, 0, 0, 0, 0, 1, 0, 0, 0.01993, 0, 1); } - 56.666667% { -webkit-transform: matrix3d(0.9998, 0, 0, 0, 0, 0.99966, 0, 0, 0, 0, 1, 0, 0, 0.01346, 0, 1); transform: matrix3d(0.9998, 0, 0, 0, 0, 0.99966, 0, 0, 0, 0, 1, 0, 0, 0.01346, 0, 1); } - 58.333333% { -webkit-transform: matrix3d(0.99988, 0, 0, 0, 0, 0.99979, 0, 0, 0, 0, 1, 0, 0, 0.00821, 0, 1); transform: matrix3d(0.99988, 0, 0, 0, 0, 0.99979, 0, 0, 0, 0, 1, 0, 0, 0.00821, 0, 1); } - 60% { -webkit-transform: matrix3d(0.99994, 0, 0, 0, 0, 0.9999, 0, 0, 0, 0, 1, 0, 0, 0.00414, 0, 1); transform: matrix3d(0.99994, 0, 0, 0, 0, 0.9999, 0, 0, 0, 0, 1, 0, 0, 0.00414, 0, 1); } - 61.666667% { -webkit-transform: matrix3d(0.99998, 0, 0, 0, 0, 0.99997, 0, 0, 0, 0, 1, 0, 0, 0.00114, 0, 1); transform: matrix3d(0.99998, 0, 0, 0, 0, 0.99997, 0, 0, 0, 0, 1, 0, 0, 0.00114, 0, 1); } - 63.333333% { -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00093, 0, 1); transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00093, 0, 1); } - 65% { -webkit-transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00006, 0, 0, 0, 0, 1, 0, 0, -0.00225, 0, 1); transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00006, 0, 0, 0, 0, 1, 0, 0, -0.00225, 0, 1); } - 66.666667% { -webkit-transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, -0.00298, 0, 1); transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, -0.00298, 0, 1); } - 68.333333% { -webkit-transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00008, 0, 0, 0, 0, 1, 0, 0, -0.00325, 0, 1); transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00008, 0, 0, 0, 0, 1, 0, 0, -0.00325, 0, 1); } - 70% { -webkit-transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00008, 0, 0, 0, 0, 1, 0, 0, -0.00321, 0, 1); transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00008, 0, 0, 0, 0, 1, 0, 0, -0.00321, 0, 1); } - 71.666667% { -webkit-transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, -0.00296, 0, 1); transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, -0.00296, 0, 1); } - 73.333333% { -webkit-transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00006, 0, 0, 0, 0, 1, 0, 0, -0.00258, 0, 1); transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00006, 0, 0, 0, 0, 1, 0, 0, -0.00258, 0, 1); } - 75% { -webkit-transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00005, 0, 0, 0, 0, 1, 0, 0, -0.00216, 0, 1); transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00005, 0, 0, 0, 0, 1, 0, 0, -0.00216, 0, 1); } - 76.666667% { -webkit-transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00004, 0, 0, 0, 0, 1, 0, 0, -0.00172, 0, 1); transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00004, 0, 0, 0, 0, 1, 0, 0, -0.00172, 0, 1); } - 78.333333% { -webkit-transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, -0.00131, 0, 1); transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, -0.00131, 0, 1); } - 80% { -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00095, 0, 1); transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00095, 0, 1); } - 81.666667% { -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00064, 0, 1); transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, -0.00064, 0, 1); } - 83.333333% { -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, -0.00039, 0, 1); transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, -0.00039, 0, 1); } - 85% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0002, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0002, 0, 1); } - 86.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00005, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00005, 0, 1); } - 88.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00004, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00004, 0, 1); } - 90% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00011, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00011, 0, 1); } - 91.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00014, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00014, 0, 1); } - 93.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00015, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00015, 0, 1); } - 95% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00015, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00015, 0, 1); } - 96.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00014, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00014, 0, 1); } - 98.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00012, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00012, 0, 1); } - 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } + 0% { opacity: 0.8; transform: scale(0.9) translateY(14px); } + 50% { opacity: 1; transform: scale(1.05) translateY(-4px); } + 100% { } } diff --git a/src/css/embeds.less b/src/css/embeds.less index 25f3a397f..99ae80483 100644 --- a/src/css/embeds.less +++ b/src/css/embeds.less @@ -20,8 +20,8 @@ line-height: 0.7em; cursor: pointer; transition: color @colorChangeSpeed, border-color @colorChangeSpeed, transform 0.35s; - -webkit-animation: pop 0.5s linear; - animation: pop 0.5s linear; + -webkit-animation: pop 0.25s; + animation: pop 0.25s; } .ck-embed-intent-btn:hover { color: #999; diff --git a/src/css/toolbar.less b/src/css/toolbar.less index 5ce6813ef..caf891844 100644 --- a/src/css/toolbar.less +++ b/src/css/toolbar.less @@ -46,8 +46,8 @@ .ck-toolbar, .ck-toolbar-prompt { - -webkit-animation: pop 0.5s linear; - animation: pop 0.5s linear; + -webkit-animation: pop 0.25s; + animation: pop 0.25s; } .ck-toolbar-buttons { @@ -66,7 +66,7 @@ margin: 0; width: 48px; height: 44px; - line-height: 44px; + line-height: 42px; cursor: pointer; transition: background-color @colorChangeSpeed; text-shadow: 0 1px rgba(0,0,0,0.7);