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 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 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
}
}

@-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;
}
}

@-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
}
}

翻转
@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);

}
}

从右边出来

@-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;
}
}

@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;}
}

 一上一下起伏

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

@-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 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 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;
}
}