/*动画-start*/.animated { animation-duration: 1.5s !important; -webkit-animation-duration: 1.5s !important; animation-fill-mode: both !important; -webkit-animation-fill-mode: both !important;}.animated02 { animation-duration: 1s !important; -webkit-animation-duration: 1s !important; animation-fill-mode: both !important; -webkit-animation-fill-mode: both !important;}/*逐渐显示*/.toShow { position: absolute; animation: toShow 1.5s 0.5s; animation: toShow 1.5s 0.5s; animation-fill-mode: both !important; -webkit-animation-fill-mode: both !important;}/* 放大效果*/.enlarge { animation-name: enlarge; -webkit-animation: enlarge;} /*从上到下进入*/.fadeInDown { animation-name: fadeInDown; -webkit-animation: fadeInDown;}/*从下到上进入*/.fadeInUpLeft { animation-name: fadeInUpLeft; -webkit-animation: fadeInUpLeft;}/*从右到左进入*/.fadeInRight { animation-name: fadeInRight; -webkit-animation: fadeInRight;}/*从左到右进入*/.fadeInLeft { animation-name: fadeInLeft; -webkit-animation: fadeInLeft;}/*中心旋转*/.coreRotate { animation-name: coreRotate; -webkit-animation-name: coreRotate;}@keyframes toShow { 0% {opacity: 0;} 100% { opacity: 1;}}@-webkit-keyframes toShow { 0% {opacity: 0;} 100% { opacity: 1;}}@keyframes enlarge{ from { opacity: 0; -ms-transform: scale(0.1,0.1); /* IE 9 */ -webkit-transform: scale(0.1,0.1); /* Safari */ transform: scale(0.1,0.1); /* 标准语法 */ } to { opacity:1; -webkit-transform:scale(1,1); transform:scale(1,1); }} @-webkit-keyframes enlarge /* Safari 与 Chrome */{ from { opacity:0; -ms-transform: scale(0.1,0.1); /* IE 9 */ -webkit-transform: scale(0.1,0.1); /* Safari */ transform: scale(0.1,0.1); /* 标准语法 */ } to { opacity:1; -webkit-transform:scale(1,1); transform:scale(1,1); }}/*从上到下*/@keyframes fadeInDown{ from { opacity: 0; -webkit-transform: translate(0,-1000px); /* Safari */ transform: stranslate(0,-1000px); /* 标准语法 */ } to { opacity:1; -webkit-transform: translate(0,10px); /* Safari */ transform: stranslate(0,10px); /* 标准语法 */ }} @-webkit-keyframes fadeInDown /* Safari 与 Chrome */{ from { opacity:0; -webkit-transform: translate(0,-1000px); /* Safari */ transform: stranslate(0,-1000px); /* 标准语法 */ } to { opacity:1; -webkit-transform: translate(0,10px); /* Safari */ transform: stranslate(0,10px); /* 标准语法 */ }}/*从左下到右上*/@keyframes fadeInUpLeft{ from { opacity: 0; -webkit-transform: translate(-1000px,1000px); /* Safari */ transform: stranslate(-1000px,1000px); /* 标准语法 */ } to { opacity:1; -webkit-transform: translate(0,10px); /* Safari */ transform: stranslate(0,10px); /* 标准语法 */ }} @-webkit-keyframes fadeInUpLeft /* Safari 与 Chrome */{ from { opacity:0; -webkit-transform: translate(-1000px,1000px); /* Safari */ transform: stranslate(-1000px,1000px); /* 标准语法 */ } to { opacity:1; -webkit-transform: translate(0,10px); /* Safari */ transform: stranslate(0,10px); /* 标准语法 */ }}/*从右到左进入*/@keyframes fadeInRight{ from { opacity: 0; -webkit-transform: translate(1000px,0); transform: stranslate(1000px,0); } to { opacity:1; -webkit-transform: translate(10px,0); transform: stranslate(10px,0); }} @-webkit-keyframes fadeInRight { from { opacity:0; -webkit-transform: translate(1000px,0); transform: stranslate(1000px,0); } to { opacity:1; -webkit-transform: translate(10px,0); transform: stranslate(10px,0); }}/*从左到右进入*/@keyframes fadeInLeft{ from { opacity: 0; -webkit-transform: translate(-1000px,0); transform: stranslate(-1000px,0); } to { opacity:1; -webkit-transform: translate(10px,0); transform: stranslate(10px,0); }} @-webkit-keyframes fadeInLeft { from { opacity:0; -webkit-transform: translate(-1000px,0); transform: stranslate(-1000px,0); } to { opacity:1; -webkit-transform: translate(10px,0); transform: stranslate(10px,0); }}/*绕中心旋转*/@keyframes coreRotate { 5% { transform:rotate(5deg); -ms-transform:rotate(5deg); /* IE 9 */ -webkit-transform:rotate(5deg); /* Safari and Chrome */ } 30% { transform:rotate(-5deg); -ms-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); } 60% { transform:rotate(5deg); -ms-transform:rotate(5deg); -webkit-transform:rotate(5deg); } 90% { transform:rotate(-5deg); -ms-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); }}@-webkit-keyframes coreRotate { 5% { transform:rotate(5deg); -ms-transform:rotate(5deg); /* IE 9 */ -webkit-transform:rotate(5deg); /* Safari and Chrome */ } 30% { transform:rotate(-5deg); -ms-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); } 60% { transform:rotate(5deg); -ms-transform:rotate(5deg); -webkit-transform:rotate(5deg); } 90% { transform:rotate(-5deg); -ms-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); }}/*动画-end*/