插件描述： Magic CSS3 Animations 动画是一款独特的CSS3动画特效包，你可以自由地使用在您的网页中。只需简单的在页面上引入 CSS 文件: magic.css 或者压缩版本 magic.min.css magic.min.css 就可以使用了。
Magic CSS3 Animations 动画是一款独特的CSS3动画特效包，你可以自由地使用在您的网页中。只需简单的在页面上引入 CSS 文件: magic.css 或者压缩版本 magic.min.css 就可以使用了。
用法
1.首先引入 magic.css 文件（或压缩版本 magic.min.css ）
2.给指定的元素加上指定的动画样式名
其中magictime决定动画的持续时间，必须添加的样式名。
也可以通过jQuery来实现：
$('#element').addClass('magictime puffIn'); 所有的动画样式名请参见demo页面。
插件源码（已上传至博客园）：
@charset "UTF-8";/*!Magic - Ver 1.1.0 - http://minimamente.comLicensed under the MIT licenseCopyright (c) 2014 Christian Pucci*/.magictime { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}.magic { -webkit-animation-name: magic; animation-name: magic;}.openDownLeft { -webkit-animation-name: openDownLeft; animation-name: openDownLeft;}.openDownRight { -webkit-animation-name: openDownRight; animation-name: openDownRight;}.openUpLeft { -webkit-animation-name: openUpLeft; animation-name: openUpLeft;}.openUpRight { -webkit-animation-name: openUpRight; animation-name: openUpRight;}.openDownLeftRetourn { -webkit-animation-name: openDownLeftRetourn; animation-name: openDownLeftRetourn;}.openDownRightRetourn { -webkit-animation-name: openDownRightRetourn; animation-name: openDownRightRetourn;}.openUpLeftRetourn { -webkit-animation-name: openUpLeftRetourn; animation-name: openUpLeftRetourn;}.openUpRightRetourn { -webkit-animation-name: openUpRightRetourn; animation-name: openUpRightRetourn;}.openDownLeftOut { -webkit-animation-name: openDownLeftOut; animation-name: openDownLeftOut;}.openDownRightOut { -webkit-animation-name: openDownRightOut; animation-name: openDownRightOut;}.openUpLeftOut { -webkit-animation-name: openUpLeftOut; animation-name: openUpLeftOut;}.openUpRightOut { -webkit-animation-name: openUpRightOut; animation-name: openUpRightOut;}.perspectiveDown { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveDown; animation-name: perspectiveDown;}.perspectiveLeft { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveLeft; animation-name: perspectiveLeft;}.perspectiveRight { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveRight; animation-name: perspectiveRight;}.perspectiveUp { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveUp; animation-name: perspectiveUp;}.perspectiveDownRetourn { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveDownRetourn; animation-name: perspectiveDownRetourn;}.perspectiveLeftRetourn { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveLeftRetourn; animation-name: perspectiveLeftRetourn;}.perspectiveRightRetourn { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveRightRetourn; animation-name: perspectiveRightRetourn;}.perspectiveUpRetourn { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveUpRetourn; animation-name: perspectiveUpRetourn;}.puffIn { -webkit-animation-name: puffIn; animation-name: puffIn;}.puffOut { -webkit-animation-name: puffOut; animation-name: puffOut;}.rotateDown { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: rotateDown; animation-name: rotateDown;}.rotateLeft { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: rotateLeft; animation-name: rotateLeft;}.rotateRight { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: rotateRight; animation-name: rotateRight;}.rotateUp { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: rotateUp; animation-name: rotateUp;}.slideDown { -webkit-animation-name: slideDown; animation-name: slideDown;}.slideLeft { -webkit-animation-name: slideLeft; animation-name: slideLeft;}.slideRight { -webkit-animation-name: slideRight; animation-name: slideRight;}.slideUp { -webkit-animation-name: slideUp; animation-name: slideUp;}.slideDownRetourn { -webkit-animation-name: slideDownRetourn; animation-name: slideDownRetourn;}.slideLeftRetourn { -webkit-animation-name: slideLeftRetourn; animation-name: slideLeftRetourn;}.slideRightRetourn { -webkit-animation-name: slideRightRetourn; animation-name: slideRightRetourn;}.slideUpRetourn { -webkit-animation-name: slideUpRetourn; animation-name: slideUpRetourn;}.swap { -webkit-animation-name: swap; animation-name: swap;}.twisterInDown { -webkit-animation-name: twisterInDown; animation-name: twisterInDown;}.twisterInUp { -webkit-animation-name: twisterInUp; animation-name: twisterInUp;}.vanishIn { -webkit-animation-name: vanishIn; animation-name: vanishIn;}.vanishOut { -webkit-animation-name: vanishOut; animation-name: vanishOut;}.swashOut { -webkit-animation-name: swashOut; animation-name: swashOut;}.swashIn { -webkit-animation-name: swashIn; animation-name: swashIn;}.foolishOut { -webkit-animation-name: foolishOut; animation-name: foolishOut;}.foolishIn { -webkit-animation-name: foolishIn; animation-name: foolishIn;}.holeOut { -webkit-animation-name: holeOut; animation-name: holeOut;}.tinRightOut { -webkit-animation-name: tinRightOut; animation-name: tinRightOut;}.tinLeftOut { -webkit-animation-name: tinLeftOut; animation-name: tinLeftOut;}.tinUpOut { -webkit-animation-name: tinUpOut; animation-name: tinUpOut;}.tinDownOut { -webkit-animation-name: tinDownOut; animation-name: tinDownOut;}.tinRightIn { -webkit-animation-name: tinRightIn; animation-name: tinRightIn;}.tinLeftIn { -webkit-animation-name: tinLeftIn; animation-name: tinLeftIn;}.tinUpIn { -webkit-animation-name: tinUpIn; animation-name: tinUpIn;}.tinDownIn { -webkit-animation-name: tinDownIn; animation-name: tinDownIn;}.bombRightOut { -webkit-animation-name: bombRightOut; animation-name: bombRightOut;}.bombLeftOut { -webkit-animation-name: bombLeftOut; animation-name: bombLeftOut;}.boingInUp { -webkit-animation-name: boingInUp; animation-name: boingInUp;}.boingOutDown { -webkit-animation-name: boingOutDown; animation-name: boingOutDown;}.spaceOutUp { -webkit-animation-name: spaceOutUp; animation-name: spaceOutUp;}.spaceOutRight { -webkit-animation-name: spaceOutRight; animation-name: spaceOutRight;}.spaceOutDown { -webkit-animation-name: spaceOutDown; animation-name: spaceOutDown;}.spaceOutLeft { -webkit-animation-name: spaceOutLeft; animation-name: spaceOutLeft;}.spaceInUp { -webkit-animation-name: spaceInUp; animation-name: spaceInUp;}.spaceInRight { -webkit-animation-name: spaceInRight; animation-name: spaceInRight;}.spaceInDown { -webkit-animation-name: spaceInDown; animation-name: spaceInDown;}.spaceInLeft { -webkit-animation-name: spaceInLeft; animation-name: spaceInLeft;}@-webkit-keyframes magic { 0% { opacity: 1; -webkit-transform-origin: 100% 200%; -webkit-transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; -webkit-transform-origin: 200% 500%; -webkit-transform: scale(0, 0) rotate(270deg); }}@keyframes magic { 0% { opacity: 1; transform-origin: 100% 200%; transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; transform-origin: 200% 500%; transform: scale(0, 0) rotate(270deg); }}@-webkit-keyframes openDownLeft { 0% { -webkit-transform-origin: bottom left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } 100% { -webkit-transform-origin: bottom left; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; }}@keyframes openDownLeft { 0% { transform-origin: bottom left; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { transform-origin: bottom left; transform: rotate(-110deg); animation-timing-function: ease-in-out; }}@-webkit-keyframes openDownRight { 0% { -webkit-transform-origin: bottom right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } 100% { -webkit-transform-origin: bottom right; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; }}@keyframes openDownRight { 0% { transform-origin: bottom right; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { transform-origin: bottom right; transform: rotate(110deg); animation-timing-function: ease-in-out; }}@-webkit-keyframes openUpLeft { 0% { -webkit-transform-origin: top left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } 100% { -webkit-transform-origin: top left; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; }}@keyframes openUpLeft { 0% { transform-origin: top left; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { transform-origin: top left; transform: rotate(110deg); animation-timing-function: ease-in-out; }}@-webkit-keyframes openUpRight { 0% { -webkit-transform-origin: top right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } 100% { -webkit-transform-origin: top right; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; }}@keyframes openUpRight { 0% { transform-origin: top right; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { transform-origin: top right; transform: rotate(-110deg); animation-timing-function: ease-in-out; }}@-webkit-keyframes openDownLeftRetourn { 0% { -webkit-transform-origin: bottom left; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: bottom left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; }}@keyframes openDownLeftRetourn { 0% { transform-origin: bottom left; transform: rotate(-110deg); animation-timing-function: ease-in-out; } 100% { transform-origin: bottom left; transform: rotate(0deg); animation-timing-function: ease-out; }}@-webkit-keyframes openDownRightRetourn { 0% { -webkit-transform-origin: bottom right; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: bottom right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; }}@keyframes openDownRightRetourn { 0% { transform-origin: bottom right; transform: rotate(110deg); animation-timing-function: ease-in-out; } 100% { transform-origin: bottom right; transform: rotate(0deg); animation-timing-function: ease-out; }}@-webkit-keyframes openUpLeftRetourn { 0% { -webkit-transform-origin: top left; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: top left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; }}@keyframes openUpLeftRetourn { 0% { transform-origin: top left; transform: rotate(110deg); animation-timing-function: ease-in-out; } 100% { transform-origin: top left; transform: rotate(0deg); animation-timing-function: ease-out; }}@-webkit-keyframes openUpRightRetourn { 0% { -webkit-transform-origin: top right; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: top right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; }}@keyframes openUpRightRetourn { 0% { transform-origin: top right; transform: rotate(-110deg); animation-timing-function: ease-in-out; } 100% { transform-origin: top right; transform: rotate(0deg); animation-timing-function: ease-out; }}@-webkit-keyframes openDownLeftOut { 0% { opacity: 1; -webkit-transform-origin: bottom left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: bottom left; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; }}@keyframes openDownLeftOut { 0% { opacity: 1; transform-origin: bottom left; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: bottom left; transform: rotate(-110deg); animation-timing-function: ease-in-out; }}@-webkit-keyframes openDownRightOut { 0% { opacity: 1; -webkit-transform-origin: bottom right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: bottom right; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; }}@keyframes openDownRightOut { 0% { opacity: 1; transform-origin: bottom right; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: bottom right; transform: rotate(110deg); animation-timing-function: ease-in-out; }}@-webkit-keyframes openUpLeftOut { 0% { opacity: 1; -webkit-transform-origin: top left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: top left; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; }}@keyframes openUpLeftOut { 0% { opacity: 1; transform-origin: top left; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: top left; transform: rotate(110deg); animation-timing-function: ease-in-out; }}@-webkit-keyframes openUpRightOut { 0% { opacity: 1; -webkit-transform-origin: top right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: top right; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; }}@keyframes openUpRightOut { 0% { opacity: 1; transform-origin: top right; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: top right; transform: rotate(-110deg); animation-timing-function: ease-in-out; }}@-webkit-keyframes perspectiveDown { 0% { -webkit-transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); } 100% { -webkit-transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); }}@keyframes perspectiveDown { 0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); } 100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); }}@-webkit-keyframes perspectiveLeft { 0% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); }}@keyframes perspectiveLeft { 0% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateY(-180deg); }}@-webkit-keyframes perspectiveRight { 0% { -webkit-transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); }}@keyframes perspectiveRight { 0% { transform-origin: 100% 0; transform: perspective(800px) rotateY(0deg); } 100% { transform-origin: 100% 0; transform: perspective(800px) rotateY(180deg); }}@-webkit-keyframes perspectiveUp { 0% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(180deg); }}@keyframes perspectiveUp { 0% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateX(180deg); }}@-webkit-keyframes perspectiveDownRetourn { 0% { -webkit-transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); } 100% { -webkit-transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); }}@keyframes perspectiveDownRetourn { 0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); } 100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); }}@-webkit-keyframes perspectiveLeftRetourn { 0% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); }}@keyframes perspectiveLeftRetourn { 0% { transform-origin: 0 0; transform: perspective(800px) rotateY(-180deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg); }}@-webkit-keyframes perspectiveRightRetourn { 0% { -webkit-transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); } 100% { -webkit-transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); }}@keyframes perspectiveRightRetourn { 0% { transform-origin: 100% 0; transform: perspective(800px) rotateY(180deg); } 100% { transform-origin: 100% 0; transform: perspective(800px) rotateY(0deg); }}@-webkit-keyframes perspectiveUpRetourn { 0% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(180deg); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg); }}@keyframes perspectiveUpRetourn { 0% { transform-origin: 0 0; transform: perspective(800px) rotateX(180deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg); }}@-webkit-keyframes puffIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(2,2); -webkit-filter: blur(2px); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1,1); -webkit-filter: blur(0px); }}@keyframes puffIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2,2); filter: blur(2px); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1,1); filter: blur(0px); }}@-webkit-keyframes puffOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1,1); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(2,2); -webkit-filter: blur(2px); }}@keyframes puffOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1,1); -webkit-filter: blur(0px); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(2,2); -webkit-filter: blur(2px); }}@-webkit-keyframes rotateDown { 0% { opacity: 1; -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 100%; -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px); }}@keyframes rotateDown { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 100%; transform: perspective(800px) rotateX(-180deg) translateZ(300px); }}@-webkit-keyframes rotateLeft { 0% { opacity: 1; -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateY(180deg) translateZ(300px); }}@keyframes rotateLeft { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateY(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateY(180deg) translateZ(300px); }}@-webkit-keyframes rotateRight { 0% { opacity: 1; -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(150px); }}@keyframes rotateRight { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateY(0deg) translate3d(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateY(-180deg) translateZ(150px); }}@-webkit-keyframes rotateUp { 0% { opacity: 1; -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px); }}@keyframes rotateUp { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateX(180deg) translateZ(100px); }}@-webkit-keyframes slideDown { 0% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(0%); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(100%); }}@keyframes slideDown { 0% { transform-origin: 0 0; transform: translateY(0%); } 100% { transform-origin: 0 0; transform: translateY(100%); }}@-webkit-keyframes slideLeft { 0% { -webkit-transform-origin: 0 0;; -webkit-transform: translateX(0%); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(-100%); }}@keyframes slideLeft { 0% { transform-origin: 0 0; transform: translateX(0%); } 100% { transform-origin: 0 0; transform: translateX(-100%); }}@-webkit-keyframes slideRight { 0% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(0%); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(100%); }}@keyframes slideRight { 0% { transform-origin: 0 0; transform: translateX(0%); } 100% { transform-origin: 0 0; transform: translateX(100%); }}@-webkit-keyframes slideUp { 0% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(0%); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(-100%); }}@keyframes slideUp { 0% { transform-origin: 0 0; transform: translateY(0%); } 100% { transform-origin: 0 0; transform: translateY(-100%); }}@-webkit-keyframes slideDownRetourn { 0% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(100%); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(0%); }}@keyframes slideDownRetourn { 0% { transform-origin: 0 0; transform: translateY(100%); } 100% { transform-origin: 0 0; transform: translateY(0%); }}@-webkit-keyframes slideLeftRetourn { 0% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(-100%); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(0%); }}@keyframes slideLeftRetourn { 0% { transform-origin: 0 0; transform: translateX(-100%); } 100% { transform-origin: 0 0; transform: translateX(0%); }}@-webkit-keyframes slideRightRetourn { 0% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(100%); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(0%); }}@keyframes slideRightRetourn { 0% { transform-origin: 0 0; transform: translateX(100%); } 100% { transform-origin: 0 0; transform: translateX(0%); }}@-webkit-keyframes slideUpRetourn { 0% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(-100%); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(0%); }}@keyframes slideUpRetourn { 0% { transform-origin: 0 0; transform: translateY(-100%); } 100% { transform-origin: 0 0; transform: translateY(0%); }}@-webkit-keyframes swap { 0% { opacity: 0; -webkit-transform-origin: 0 100%; -webkit-transform: scale(0, 0) translate(-700px, 0px); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; -webkit-transform: scale(1, 1) translate(0px, 0px);; }}@keyframes swap { 0% { opacity: 0; transform-origin: 0 100%; transform: scale(0, 0) translate(-700px, 0px); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1, 1) translate(0px, 0px); }}@-webkit-keyframes twisterInDown { 0% { opacity: 0; -webkit-transform-origin: 0 100%; -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%); } 30% { -webkit-transform-origin: 0 100%; -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%); }}@keyframes twisterInDown { 0% { opacity: 0; transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 30% { transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1, 1) rotate(0deg) translateY(0%); }}@-webkit-keyframes twisterInUp { 0% { opacity: 0; -webkit-transform-origin: 100% 0; -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%); } 30% { -webkit-transform-origin: 100% 0; -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%); } 100% { opacity: 1; -webkit-transform-origin: 0 0; -webkit-transform: scale(1, 1) rotate(0deg) translateY(0); }}@keyframes twisterInUp { 0% { opacity: 0; transform-origin: 100% 0; transform: scale(0, 0) rotate(360deg) translateY(100%); } 30% { transform-origin: 100% 0; transform: scale(0, 0) rotate(360deg) translateY(100%); } 100% { opacity: 1; transform-origin: 0 0; transform: scale(1, 1) rotate(0deg) translateY(0); }}@-webkit-keyframes vanishIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -webkit-filter: blur(90px); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -webkit-filter: blur(0px); }}@keyframes vanishIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); -webkit-filter: blur(90px); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); -webkit-filter: blur(0px); }}@-webkit-keyframes vanishOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -webkit-filter: blur(20px); }}@keyframes vanishOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); -webkit-filter: blur(0px); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); -webkit-filter: blur(20px); }}@-webkit-keyframes swashOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 80% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0.9, 0.9); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0, 0); }}@keyframes swashOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } 80% { opacity: 1; transform-origin: 50% 50%; transform: scale(0.9, 0.9); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); }}@-webkit-keyframes swashIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0, 0); } 90% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0.9, 0.9); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1, 1); }}@keyframes swashIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } 90% { opacity: 1; transform-origin: 50% 50%; transform: scale(0.9, 0.9); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); }}@-webkit-keyframes foolishOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotate(360deg); } 20% { opacity: 1; -webkit-transform-origin: 0% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; -webkit-transform-origin: 100% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; -webkit-transform-origin: 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; -webkit-transform-origin: 0% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotate(0deg); }}@keyframes foolishOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotate(360deg); } 20% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; transform-origin: 100% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; transform-origin: 0%; transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotate(0deg); }}@-webkit-keyframes foolishIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotate(360deg); } 20% { opacity: 1; -webkit-transform-origin: 0% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; -webkit-transform-origin: 100% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; -webkit-transform-origin: 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; -webkit-transform-origin: 0% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotate(0deg); }}@keyframes foolishIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotate(360deg); } 20% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; transform-origin: 100% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; transform-origin: 0%; transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotate(0deg); }}@-webkit-keyframes holeOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotateY(0deg); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotateY(180deg); }}@keyframes holeOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotateY(0deg); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotateY(180deg); }}@-webkit-keyframes tinRightOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); }}@keyframes tinRightOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; transform: scale(1, 1) translateX(900%); }}@-webkit-keyframes tinLeftOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); }}@keyframes tinLeftOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; transform: scale(1, 1) translateX(-900%); }}@-webkit-keyframes tinUpOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); }}@keyframes tinUpOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; transform: scale(1, 1) translateY(-900%); }}@-webkit-keyframes tinDownOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); }}@keyframes tinDownOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; transform: scale(1, 1) translateY(900%); }}@-webkit-keyframes tinRightIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); }}@keyframes tinRightIn { 0% { opacity: 0; transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateX(0); }}@-webkit-keyframes tinLeftIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); }}@keyframes tinLeftIn { 0% { opacity: 0; transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateX(0); }}@-webkit-keyframes tinUpIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); }}@keyframes tinUpIn { 0% { opacity: 0; transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateY(0); }}@-webkit-keyframes tinDownIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); }}@keyframes tinDownIn { 0% { opacity: 0; transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateY(0); }}@-webkit-keyframes bombRightOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; -webkit-transform-origin: 200% 50%; -webkit-transform: rotate(160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: 200% 50%; -webkit-transform: rotate(160deg); -webkit-filter: blur(20px); }}@keyframes bombRightOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; transform-origin: 200% 50%; transform: rotate(160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; transform-origin: 200% 50%; transform: rotate(160deg); -webkit-filter: blur(20px); }}@-webkit-keyframes bombLeftOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; -webkit-transform-origin: -100% 50%; -webkit-transform: rotate(-160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: -100% 50%; -webkit-transform: rotate(-160deg); -webkit-filter: blur(20px); }}@keyframes bombLeftOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; transform-origin: -100% 50%; transform: rotate(-160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; transform-origin: -100% 50%; transform: rotate(-160deg); -webkit-filter: blur(20px); }}@-webkit-keyframes boingInUp { 0% { opacity: 0; -webkit-transform-origin: 50% 0%; -webkit-transform: perspective(800px) rotateX(-90deg); } 50% { opacity: 1; -webkit-transform-origin: 50% 0%; -webkit-transform: perspective(800px) rotateX(50deg); } 100% { opacity: 1; -webkit-transform-origin: 50% 0%; -webkit-transform: perspective(800px) rotateX(0deg); }}@keyframes boingInUp { 0% { opacity: 0; transform-origin: 50% 0%; transform: perspective(800px) rotateX(-90deg); } 50% { opacity: 1; transform-origin: 50% 0%; transform: perspective(800px) rotateX(50deg); } 100% { opacity: 1; transform-origin: 50% 0%; transform: perspective(800px) rotateX(0deg); }}@-webkit-keyframes boingOutDown { 0% { opacity: 1; -webkit-transform-origin: 100% 100%; -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 20% { opacity: 1; -webkit-transform-origin: 100% 100%; -webkit-transform: perspective(800px) rotateX(0deg) rotateY(10deg); } 30% { opacity: 1; -webkit-transform-origin: 0% 100%; -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 40% { opacity: 1; -webkit-transform-origin: 0% 100%; -webkit-transform: perspective(800px) rotateX(10deg) rotateY(10deg); } 100% { opacity: 0; -webkit-transform-origin: 100% 100%; -webkit-transform: perspective(800px) rotateX(90deg) rotateY(0deg); }}@keyframes boingOutDown { 0% { opacity: 1; transform-origin: 100% 100%; transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 20% { opacity: 1; transform-origin: 100% 100%; transform: perspective(800px) rotateX(0deg) rotateY(10deg); } 30% { opacity: 1; transform-origin: 0% 100%; transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 40% { opacity: 1; transform-origin: 0% 100%; transform: perspective(800px) rotateX(10deg) rotateY(10deg); } 100% { opacity: 0; transform-origin: 100% 100%; transform: perspective(800px) rotateX(90deg) rotateY(0deg); }}@-webkit-keyframes spaceOutUp { 0% { opacity: 1; -webkit-transform-origin: 50% 0%; -webkit-transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; -webkit-transform-origin: 50% 0%; -webkit-transform: scale(.2) translate(0%, -200%); }}@keyframes spaceOutUp { 0% { opacity: 1; transform-origin: 50% 0%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 50% 0%; transform: scale(.2) translate(0%, -200%); }}@-webkit-keyframes spaceOutRight { 0% { opacity: 1; -webkit-transform-origin: 100% 50%; -webkit-transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; -webkit-transform-origin: 100% 50%; -webkit-transform: scale(.2) translate(200%, 0%); }}@keyframes spaceOutRight { 0% { opacity: 1; transform-origin: 100% 50%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 100% 50%; transform: scale(.2) translate(200%, 0%); }}@-webkit-keyframes spaceOutDown { 0% { opacity: 1; -webkit-transform-origin: 50% 100%; -webkit-transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; -webkit-transform-origin: 50% 100%; -webkit-transform: scale(.2) translate(0%, 200%); }}@keyframes spaceOutDown { 0% { opacity: 1; transform-origin: 50% 100%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 50% 100%; transform: scale(.2) translate(0%, 200%); }}@-webkit-keyframes spaceOutLeft { 0% { opacity: 1; -webkit-transform-origin: 0% 50%; -webkit-transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; -webkit-transform-origin: 0% 50%; -webkit-transform: scale(.2) translate(-200%, 0%); }}@keyframes spaceOutLeft { 0% { opacity: 1; transform-origin: 0% 50%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 0% 50%; transform: scale(.2) translate(-200%, 0%); }}@-webkit-keyframes spaceInUp { 0% { opacity: 0; -webkit-transform-origin: 50% 0%; -webkit-transform: scale(.2) translate(0%, -200%); } 100% { opacity: 1; -webkit-transform-origin: 50% 0%; -webkit-transform: scale(1) translate(0%, 0%); }}@keyframes spaceInUp { 0% { opacity: 0; transform-origin: 50% 0%; transform: scale(.2) translate(0%, -200%); } 100% { opacity: 1; transform-origin: 50% 0%; transform: scale(1) translate(0%, 0%); }}@-webkit-keyframes spaceInRight { 0% { opacity: 0; -webkit-transform-origin: 100% 50%; -webkit-transform: scale(.2) translate(200%, 0%); } 100% { opacity: 1; -webkit-transform-origin: 100% 50%; -webkit-transform: scale(1) translate(0%, 0%); }}@keyframes spaceInRight { 0% { opacity: 0; transform-origin: 100% 50%; transform: scale(.2) translate(200%, 0%); } 100% { opacity: 1; transform-origin: 100% 50%; transform: scale(1) translate(0%, 0%); }}@-webkit-keyframes spaceInDown { 0% { opacity: 0; -webkit-transform-origin: 50% 100%; -webkit-transform: scale(.2) translate(0%, 200%); } 100% { opacity: 1; -webkit-transform-origin: 50% 100%; -webkit-transform: scale(1) translate(0%, 0%); }}@keyframes spaceInDown { 0% { opacity: 0; transform-origin: 50% 100%; transform: scale(.2) translate(0%, 200%); } 100% { opacity: 1; transform-origin: 50% 100%; transform: scale(1) translate(0%, 0%); }}@-webkit-keyframes spaceInLeft { 0% { opacity: 0; -webkit-transform-origin: 0% 50%; -webkit-transform: scale(.2) translate(-200%, 0%); } 100% { opacity: 1; -webkit-transform-origin: 0% 50%; -webkit-transform: scale(1) translate(0%, 0%); }}@keyframes spaceInLeft { 0% { opacity: 0; transform-origin: 0% 50%; transform: scale(.2) translate(-200%, 0%); } 100% { opacity: 1; transform-origin: 0% 50%; transform: scale(1) translate(0%, 0%); }} 实例上传至博客园（magic-master）
原文网址：