css3 动画右侧进入,css3动画（从上、左下、左、右进入页面）

/*动画-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*/