1.前几页
/*page1动画*/
.page1 .scroll-page1 .bg {
opacity: 0;
transform-origin: 50% 200%;
}
.page1 .scroll-page1 .person {
opacity: 0;
transform-origin: 50% 200%;
}
.page1 .scroll-page1 .message-container {
opacity: 0;
transform-origin: right bottom;
}
@keyframes rotateInOut {
0% {
transform: rotateZ(90deg);
}
25% {
transform: rotateZ(-5deg);
opacity: 1;
}
30% {
transform: rotateZ(0);
opacity: 1;
}
65% {
transform: rotateZ(0);
opacity: 1;
}
70% {
transform: rotateZ(5deg);
opacity: 1;
}
100% {
transform: rotateZ(-90deg);
opacity: 0;
}
}
.page1.animate .scroll-page1 .bg {
animation: rotateInOut 1.5s forwards;
}
.page1.animate .scroll-page1 .person {
animation: rotateInOut 1.5s 0.2s forwards;
}
.page1.animate .scroll-page1 .person .paper1 {
animation: paperRun 1s infinite;
}
.page1.animate .scroll-page1 .person .paper2 {
animation: paperRun 1s infinite;
}
.page1.animate .scroll-page1 .message-container {
animation: rotateInOut 1.5s 0.5s forwards;
}
2.最后一页
.page1 .scroll-page3 .bg {
opacity: 0;
transform-origin: 50% 200%;
}
.page1 .scroll-page3 .person {
opacity: 0;
transform-origin: 50% 200%;
}
.page1 .scroll-page3 .message-container {
opacity: 0;
transform-origin: right bottom;
}
@keyframes rotateInNotOut {
0% {
transform: rotateZ(90deg);
}
95% {
transform: rotateZ(-5deg);
opacity: 1;
}
100% {
transform: rotateZ(0);
opacity: 1;
}
}
.page1.animate .scroll-page3 .bg {
animation: rotateInNotOut 0.5s 3.4s forwards;
}
.page1.animate .scroll-page3 .person {
animation: rotateInNotOut 0.5s 3.6s forwards;
}
.page1.animate .scroll-page3 .message-container {
animation: rotateInNotOut 0.5s 3.9s forwards;
}