css3制作翻滚动画,css3之图片波浪翻滚动画

.pic1,.pic2,.pic3,.pic4,.pic5,.line1,.line2,.line3,.line4_1,.line4_2,.line4_3,.line4_4,.line4_5{

background: url(../images/total_pic.png) no-repeat;opacity:

0;

}

.line1,.line2,.line3,.line4_1,.line4_2,.line4_3,.line4_4,.line4_5{

-webkit-transform-origin:top center;

transform-origin:top center;

}

.pic1,.pic2,.pic3,.pic4{

-webkit-animation:change 0.8s ease-in-out forwards;

animation:change 0.8s ease-in-out forwards;

}

.line1,.line2,.line3{

-webkit-animation:show 0.6s ease-in-out forwards;

animation:show 0.6s ease-in-out forwards;

}

.line4_1,.line4_2,.line4_3,.line4_4,.line4_5{

float:left;margin-right: 33px;width:

140px;height:19px;margin-top: -1px;

}

.pic1{

background-position:0 0;width: 846px;height: 140px;

}

.pic2{

background-position:0 -159px;width: 846px;height: 95px;

-webkit-animation-delay:0.6s;

animation-delay:0.6s;

}

.pic3{

background-position:0 -270px;width: 846px;height: 43px;

-webkit-animation-delay:1.1s;

animation-delay:1.1s;

}

.pic4{

background-position:0 -333px;width: 846px;height: 90px;

-webkit-animation-delay:1.6s;

animation-delay:1.6s;

}

.pic5{

background-position:0 -480px;width:

846px;height:157px;margin-top: 20px;

-webkit-animation:change 1.6s ease-in-out 2.5s

forwards;

animation:change 1.6s ease-in-out 2.5s forwards;

}

.line1{

background-position:0 -140px;width: 846px;height: 19px;

-webkit-animation-delay:0.5s;

animation-delay:0.5s;

}

.line2{

background-position:0 -254px;width: 846px;height: 16px;

-webkit-animation-delay:1s;

animation-delay:1s;

}

.line3{

background-position:0 -313px;width: 846px;height: 20px;

-webkit-animation-delay:1.5s;

animation-delay:1.5s;

}

.line4_1{

background-position:0 -140px;

-webkit-animation:Mrotate1 0.6s ease-in-out 2s

forwards;

animation:Mrotate1 0.6s ease-in-out 2s forwards;

}

.line4_2{

background-position:-176px -140px;

-webkit-animation:Mrotate2 0.6s ease-in-out 2s

forwards;

animation:Mrotate2 0.6s ease-in-out 2s forwards;

}

.line4_3{

background-position:-348px -140px;

-webkit-animation:Mrotate3 0.6s ease-in-out 2s

forwards;

animation:Mrotate3 0.6s ease-in-out 2s forwards;

}

.line4_4{

background-position:-521px -140px;

-webkit-animation:Mrotate4 0.6s ease-in-out 2s

forwards;

animation:Mrotate4 0.6s ease-in-out 2s forwards;

}

.line4_5{

background-position:-693px -140px;

-webkit-animation:Mrotate5 0.6s ease-in-out 2s

forwards;

animation:Mrotate5 0.6s ease-in-out 2s forwards;

}

@-webkit-keyframes change{

from{

-webkit-transform:rotateX(180deg);

}

to{

opacity: 1;

-webkit-transform:rotateX(360deg);

}

}

@keyframes change{

from{

transform:rotateX(180deg);

}

to{

opacity: 1;

transform:rotateX(360deg);

}

}

@-webkit-keyframes show{

from{

-webkit-transform:scaleY(0);

}

to{

opacity: 1;

-webkit-transform:scaleY(1);

}

}

@keyframes show{

from{

transform:scaleY(0);

}

to{

opacity: 1;

transform:scaleY(1);

}

}

@-webkit-keyframes Mrotate1{

from{

-webkit-transform:rotate(0) scaleY(0);

}

50%{

opacity: 1;

-webkit-transform:rotate(0) scaleY(15);

}

100%{

opacity: 1;

-webkit-transform:rotate(-70deg) scaleY(15);

}

}

@keyframes Mrotate1{

from{

transform:rotate(0) scaleY(0);

}

50%{

opacity: 1;

transform:rotate(0)

scaleY(15);

}

100%{

opacity: 1;

transform:rotate(-70deg) scaleY(15);

}

}

@-webkit-keyframes Mrotate2{

from{

-webkit-transform:rotate(0) scaleY(0);

}

50%{

opacity: 1;

-webkit-transform:rotate(0) scaleY(7);

}

100%{

opacity: 1;

-webkit-transform:rotate(-54deg) scaleY(7);

}

}

@keyframes Mrotate2{

from{

transform:rotate(0) scaleY(0);

}

50%{

opacity: 1;

transform:rotate(0)

scaleY(7);

}

100%{

opacity: 1;

transform:rotate(-54deg) scaleY(7);

}

}

@-webkit-keyframes Mrotate3{

from{

-webkit-transform:scaleY(0);

}

100%{

opacity: 1;

-webkit-transform:scaleY(1.5);

}

}

@keyframes Mrotate3{

from{

transform:scaleY(0);

}

100%{

opacity: 1;

transform:scaleY(1.5);

}

}

@-webkit-keyframes Mrotate4{

from{

-webkit-transform:rotate(0) scaleY(0);

}

50%{

opacity: 1;

-webkit-transform:rotate(0) scaleY(7);

}

100%{

opacity: 1;

-webkit-transform:rotate(54deg) scaleY(7);

}

}

@keyframes Mrotate4{

from{

transform:rotate(0) scaleY(0);

}

50%{

opacity: 1;

transform:rotate(0)

scaleY(7);

}

100%{

opacity: 1;

transform:rotate(54deg) scaleY(7);

}

}

@-webkit-keyframes Mrotate5{

from{

-webkit-transform:rotate(0) scaleY(0);

}

50%{

opacity: 1;

-webkit-transform:rotate(0) scaleY(15);

}

100%{

opacity: 1;

-webkit-transform:rotate(70deg) scaleY(15);

}

}

@keyframes Mrotate5{

from{

transform:rotate(0) scaleY(0);

}

50%{

opacity: 1;

transform:rotate(0)

scaleY(15);

}

100%{

opacity: 1;

transform:rotate(70deg) scaleY(15);

}

}