css3

从页面上放出来

@-webkit-keyframes fadeInDown {
???from {
???????opacity: 0;
?????
???????transform: translate3d(0, -100%, 0);
???}

???to {
???????opacity: 1;
???????
???????transform: none;
???}
}

@keyframes fadeInDown {
???from {
???????opacity: 0;
????
?????????transform: translate3d(0, -100%, 0);
???}

???to {
???????opacity: 1;
????
???????transform: none;
???}
}

从外面往里面缩放

@-webkit-keyframes zoomOut {
from {
opacity: 1;
-webkit-transform: scale3d(3, 3, 3);
transform: scale3d(3, 3, 3);
}
50% {
opacity: .8;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
to {
opacity: 1;
}
}

@keyframes zoomOut {
from {
opacity: 1;
-webkit-transform: scale3d(3, 3, 3);
transform: scale3d(3, 3, 3);
}
50% {
opacity: .8;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
to {
opacity: 1;
}
}

从里面往外面缩放

@-webkit-keyframes zoomIn {
???from {
???????opacity: 0;
????
???????transform: scale3d(.3, .3, .3);
???}

???50% {
???????opacity: 1;
???}

???100% {
???????opacity: 1;
???}
}

@keyframes zoomIn {
???from {
???????opacity: 0;
????
???????transform: scale3d(0.3, 0.3, 0.3);
???}

???50% {
???????opacity: 1;
???}

???100% {
???????opacity: 1;
???}
}

一直一大一小的缩放
@-webkit-keyframes apt {
???0% {
??????transform: scale(0.85);
???????opacity: .75
???}

???50% {
?????transform: scale(1);
???????opacity: 1
???}

???100% {
??????transform: scale(0.85);
???????opacity: .75
???}
}

@-moz-keyframes apt {
???0% {
??????transform: scale(0.85);
???????opacity: .75
???}

???50% {
?????transform: scale(1);
???????opacity: 1
???}

???100% {
??????transform: scale(0.85);
???????opacity: .75
???}
}

@-o-keyframes apt {
??0% {
??????transform: scale(0.85);
???????opacity: .75
???}

???50% {
?????transform: scale(1);
???????opacity: 1
???}

???100% {
??????transform: scale(0.85);
???????opacity: .75
???}
}

@-ms-keyframes apt {
??0% {
??????transform: scale(0.85);
???????opacity: .75
???}

???50% {
?????transform: scale(1);
???????opacity: 1
???}

???100% {
??????transform: scale(0.85);
???????opacity: .75
???}
}

@keyframes apt {
0% {
??????transform: scale(0.85);
???????opacity: .75
???}

???50% {
?????transform: scale(1);
???????opacity: 1
???}

???100% {
??????transform: scale(0.85);
???????opacity: .75
???}
}

圆圈转圈
@-webkit-keyframes rotateIn360 {
???from {
?????
???????transform-origin: center;
???????
???????transform: rotate3d(0,0,1,-360deg)
???}

???to {
????
???????transform-origin: center;
??????
???????transform: none
???}
}

@keyframes rotateIn360 {
???from {
??????
???????transform-origin: center;
??????
???????transform: rotate3d(0,0,1,-360deg)
???}

???to {
????
???????transform-origin: center;
????
???????transform: none
???}
}

翻转
@keyframes fan
{
?0% {
????
???????transform:rotateY(0deg);
???}
?100%{

?????transform:rotateY(360deg);
?}
}

@-moz-keyframes fan
{
0% {
???
???????-moz-transform:rotateY(0deg);
?????
???}
?100%{
?
?????-moz-transform:rotateY(360deg);
???
?}
}

@-webkit-keyframes fan
{
0% {
?????-webkit-transform:rotateY(0deg);
?????
???}
?100%{
???-webkit-transform:rotateY(360deg);
?}
}

@-o-keyframes fan
{
0% {
??
???????-o-transform:rotateY(0deg);
??????
???}
?100%{
?
?????-o-transform:rotateY(360deg);
????
?}
}

从右边出来

@keyframes movetitle
{
?0% { margin-left: -450px; opacity: 0}
?100%{margin-left: -500px; opacity: 1}
}

@-moz-keyframes movetitle
{
?0% { margin-left: -450px; opacity: 0}
?100%{margin-left: -500px; opacity: 1}
}

@-webkit-keyframes movetitle
{
?0% { margin-left: -450px; opacity: 0}
?100%{margin-left: -500px; opacity: 1}
}

@-o-keyframes movetitle
{
?0% { margin-left: -450px; opacity: 0}
?100%{margin-left: -500px; opacity: 1}
}

从左边出来
@keyframes movedesc
{
?0% { margin-left: -600px; opacity: 0;}
?100%{margin-left: -550px; opacity: 1;}
}

@-moz-keyframes movedesc
{
?0% { margin-left: -600px; opacity: 0;}
?100%{margin-left: -550px; opacity: 1;}
}

@-webkit-keyframes movedesc
{
?0% { margin-left: -600px; opacity: 0;}
?100%{margin-left: -550px; opacity: 1;}
}

@-o-keyframes movedesc
{
?0% { margin-left: -600px; opacity: 0;}
?100%{margin-left: -550px; opacity: 1;}
}

@-webkit-keyframes zoomIn {
???from {
???????opacity: 0;
???????-webkit-transform: scale3d(.3, .3, .3);
???????transform: scale3d(.3, .3, .3);
???}
???to {
???????opacity: 1;
???}
}

@keyframes zoomIn {
???from {
???????opacity: 0;
???????-webkit-transform: scale3d(.3, .3, .3);
???????transform: scale3d(.3, .3, .3);
???}
???to {
???????opacity: 1;
???}
}

@-webkit-keyframes fadeInUp {
???from {
???????opacity: 0;
???????-webkit-transform: translate3d(0, 100%, 0);
???????transform: translate3d(0, 100%, 0);
???}
???to {
???????opacity: 1;
???????-webkit-transform: none;
???????transform: none;
???}
}

@keyframes fadeInUp {
???from {
???????opacity: 0;
???????-webkit-transform: translate3d(0, 100%, 0);
???????transform: translate3d(0, 100%, 0);
???}
???to {
???????opacity: 1;
???????-webkit-transform: none;
???????transform: none;
???}
}

@-webkit-keyframes fadeInUpXs {
???from {
???????opacity: 0;
???????-webkit-transform: translate3d(0, 40%, 0);
???????transform: translate3d(0, 40%, 0);
???}
???to {
???????opacity: 1;
???????-webkit-transform: none;
???????transform: none;
???}
}

@keyframes fadeInUpXs {
???from {
???????opacity: 0;
???????-webkit-transform: translate3d(0, 40%, 0);
???????transform: translate3d(0, 40%, 0);
???}
???to {
???????opacity: 1;
???????-webkit-transform: none;
???????transform: none;
???}
}

@-webkit-keyframes fadeInDown {
???from {
???????opacity: 0;
???????-webkit-transform: translate3d(0, -100%, 0);
???????transform: translate3d(0, -100%, 0);
???}
???to {
???????opacity: 1;
???????-webkit-transform: none;
???????transform: none;
???}
}

@keyframes fadeInDown {
???from {
???????opacity: 0;
???????-webkit-transform: translate3d(0, -100%, 0);
???????transform: translate3d(0, -100%, 0);
???}
???to {
???????opacity: 1;
???????-webkit-transform: none;
???????transform: none;
???}
}

@-webkit-keyframes fadeInDownXs {
???from {
???????opacity: 0;
???????-webkit-transform: translate3d(0, -30%, 0);
???????transform: translate3d(0, -30%, 0);
???}
???to {
???????opacity: 1;
???????-webkit-transform: none;
???????transform: none;
???}
}

@keyframes fadeInDownXs {
???from {
???????opacity: 0;
???????-webkit-transform: translate3d(0, -30%, 0);
???????transform: translate3d(0, -30%, 0);
???}
???to {
???????opacity: 1;
???????-webkit-transform: none;
???????transform: none;
???}
}

@-webkit-keyframes fadeInRight {
???from {
???????opacity: 0;
???????-webkit-transform: translate3d(100%, 0, 0);
???????transform: translate3d(100%, 0, 0);
???}
???to {
???????opacity: 1;
???????-webkit-transform: none;
???????transform: none;
???}
}

@keyframes fadeInRight {
???from {
???????opacity: 0;
???????-webkit-transform: translate3d(100%, 0, 0);
???????transform: translate3d(100%, 0, 0);
???}
???to {
???????opacity: 1;
???????-webkit-transform: none;
???????transform: none;
???}
}

@-webkit-keyframes rotateIn {
???from {
???????-webkit-transform-origin: center;
???????transform-origin: center;
???????-webkit-transform: rotate3d(0, 0, 1, -180deg);
???????transform: rotate3d(0, 0, 1, -180deg);
???????opacity: 0;
???}
???to {
???????-webkit-transform-origin: center;
???????transform-origin: center;
???????-webkit-transform: none;
???????transform: none;
???????opacity: 1;
???}
}

@keyframes rotateIn {
???from {
???????-webkit-transform-origin: center;
???????transform-origin: center;
???????-webkit-transform: rotate3d(0, 0, 1, -180deg);
???????transform: rotate3d(0, 0, 1, -180deg);
???????opacity: 1;
???}
???to {
???????-webkit-transform-origin: center;
???????transform-origin: center;
???????-webkit-transform: none;
???????transform: none;
???????opacity: 1;
???}
}

@keyframes movetip {
???0% {
???????top: 4px;
???}
???50% {
???????top: 8px;
???}
???100% {
???????top: 4px;
???}
}

@-webkit-keyframes movetip {
???0% {
???????top: 4px;
???}
???50% {
???????top: 8px;
???}
???100% {
???????top: 4px;
???}
}

@-webkit-keyframes rotateIn360 {
???from {
???????-webkit-transform-origin: center;
???????transform-origin: center;
???????-webkit-transform: rotate3d(0, 0, 1, -360deg);
???????transform: rotate3d(0, 0, 1, -360deg)
???}
???to {
???????-webkit-transform-origin: center;
???????transform-origin: center;
???????-webkit-transform: none;
???????transform: none
???}
}

@keyframes rotateIn360 {
???from {
???????-webkit-transform-origin: center;
???????transform-origin: center;
???????-webkit-transform: rotate3d(0, 0, 1, -360deg);
???????transform: rotate3d(0, 0, 1, -360deg)
???}
???to {
???????-webkit-transform-origin: center;
???????transform-origin: center;
???????-webkit-transform: none;
???????transform: none
???}
}

@-webkit-keyframes fadeInLeft {
???from {
???????opacity: 0;
???????-webkit-transform: translate3d(-100%, 0, 0);
???????transform: translate3d(-100%, 0, 0);
???}
???to {
???????opacity: 1;
???????-webkit-transform: none;
???????transform: none;
???}
}

@keyframes fadeInLeft {
???from {
???????opacity: 0;
???????-webkit-transform: translate3d(-100%, 0, 0);
???????transform: translate3d(-100%, 0, 0);
???}
???to {
???????opacity: 1;
???????-webkit-transform: none;
???????transform: none;
???}
}

@-webkit-keyframes fadeOut {
???from {
???????opacity: 1;
???}
???to {
???????opacity: 0;
???}
}

@keyframes fadeOut {
???from {
???????opacity: 1;
???}
???to {
???????opacity: 0;
???}
}

@-webkit-keyframes fadeIn {
???from {
???????opacity: 0;
???}
???to {
???????opacity: 1;
???}
}

@keyframes fadeIn {
???from {
???????opacity: 0;
???}
???to {
???????opacity: 1;
???}
}

@-webkit-keyframes bounceInDown {
???from,
???60%,
???75%,
???90%,
???to {
???????-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
???????animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
???}
???0% {
???????opacity: 0;
???????-webkit-transform: translate3d(0, -3000px, 0);
???????transform: translate3d(0, -3000px, 0);
???}
???60% {
???????opacity: 1;
???????-webkit-transform: translate3d(0, 25px, 0);
???????transform: translate3d(0, 25px, 0);
???}
???75% {
???????-webkit-transform: translate3d(0, -10px, 0);
???????transform: translate3d(0, -10px, 0);
???}
???90% {
???????-webkit-transform: translate3d(0, 5px, 0);
???????transform: translate3d(0, 5px, 0);
???}
???to {
???????-webkit-transform: none;
???????transform: none;
???}
}

@keyframes bounceInDown {
???from,
???60%,
???75%,
???90%,
???to {
???????-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
???????animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
???}
???0% {
???????opacity: 0;
???????-webkit-transform: translate3d(0, -3000px, 0);
???????transform: translate3d(0, -3000px, 0);
???}
???60% {
???????opacity: 1;
???????-webkit-transform: translate3d(0, 25px, 0);
???????transform: translate3d(0, 25px, 0);
???}
???75% {
???????-webkit-transform: translate3d(0, -10px, 0);
???????transform: translate3d(0, -10px, 0);
???}
???90% {
???????-webkit-transform: translate3d(0, 5px, 0);

???????transform: translate3d(0, 5px, 0);
???}
???to {
???????-webkit-transform: none;
???????transform: none;
???}
}