rollIn、rollOut、rotate、rotateIn、rubberBand、rightflip--动画

第一种方式：rollIn--动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 10px; width: 300px;-webkit-animation: rollIn 2s ease 0s 1 both;}
.item-02{ position: absolute; left: 250px; top: 300px; width: 300px;-webkit-animation: rollIn 1.5s infinite ease-in-out;}
@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}

本地效果为：app/html5_animation/rollIn.html

 

第二种方式：rollOut--动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 10px; width: 300px;-webkit-animation: rollOut 2s ease 0s 1 both;}
.item-02{ position: absolute; left: 250px; top: 300px; width: 300px;-webkit-animation: rollOut 1.5s infinite ease-in-out;}
@-webkit-keyframes rollOut{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}
}
@keyframes rollOut{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}
}
.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}

本地效果为：app/html5_animation/rollOut.html

 

第三种方式：rotate--动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 50px; top: 10px; width: 300px;-webkit-animation: twisterInUp 3s ease 0s 1 both;}
.rotate{-webkit-animation:rotating 1.2s linear infinite;-moz-animation:rotating 1.2s linear infinite;-o-animation:rotating 1.2s linear infinite;animation:rotating 1.2s linear infinite}
@-webkit-keyframes rotating{from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}
@keyframes rotating{from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
@-moz-keyframes rotating{from{-moz-transform:rotate(0deg)}
to{-moz-transform:rotate(360deg)}
}

本地效果为：app/html5_animation/rotate.html

 

第四种方式：rotateIn--动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 10px; width: 300px;-webkit-animation: rotateIn 2s ease 0s 1 both;}
.item-02{ position: absolute; left: 250px; top: 300px; width: 300px;-webkit-animation: rotateIn 1.5s infinite ease-in-out;}
@-webkit-keyframes rotateIn{from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes rotateIn{from{-moz-transform:rotate(0deg)}
to{-moz-transform:rotate(359deg)}
}
@-o-keyframes rotateIn{from{-o-transform:rotate(0deg)}
to{-o-transform:rotate(359deg)}
}
@keyframes rotateIn{from{transform:rotate(0deg)}
to{transform:rotate(359deg)}
}
.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}

本地效果为：app/html5_animation/rotateIn.html

 

第五种方式：rubberBand--动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 10px; width: 300px;-webkit-animation: rubberBand 2s ease 0s 1 both;}
.item-02{ position: absolute; left: 250px; top: 300px; width: 300px;-webkit-animation: rubberBand 1.5s infinite ease-in-out;}
@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}

本地效果为：app/html5_animation/rubberBand.html

 

第六种方式：rightflip-动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 10px; width: 300px;-webkit-animation: rightflip 2s ease 0s 1 both;}
.item-02{ position: absolute; left: 250px; top: 300px; width: 300px;-webkit-animation: rightflip 1.5s infinite ease-in-out;}
@-webkit-keyframes rightflip{0%,30%{opacity:0;-webkit-transform:translate(10,0)}
60%{opacity:1;-webkit-transform:translate(0,0)}
100%{opacity:0;-webkit-transform:translate(-8px,0)}
}
@-moz-keyframes rightflip{0%,30%{opacity:0;-moz-transform:translate(10,0)}
60%{opacity:1;-moz-transform:translate(0,0)}
100%{opacity:0;-moz-transform:translate(-8px,0)}
}
@keyframes rightflip{0%,30%{opacity:0;transform:translate(10,0)}
60%{opacity:1;transform:translate(0,0)}
100%{opacity:0;transform:translate(-8px,0)}
}

本地效果为：app/html5_animation/rightflip.html