fadeIn、fadeInUp、fadeInDown、fadeInLeft、fadeInRight---動畫

 第一種：fadeIn-動畫

CSS代碼為：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 10px; width: 800px;-webkit-animation: fadeIn 2s ease 0.5s 1 both;}
.item-02{ position: absolute; left: 250px; top: 200px; width: 800px;-webkit-animation: fadeIn 2s ease 0.8s 1 both;}
.item-03{ position: absolute; left: 100px; top: 400px; width: 800px;-webkit-animation: fadeIn 2s ease 1.6s 1 both;}
.item-04{ position: absolute; left: 300px; top: 600px; width: 800px;-webkit-animation: fadeIn 2s ease 2.4s 1 both;}
@-webkit-keyframes fadeIn{
    0%{opacity:0}
    100%{opacity:1}
}
@keyframes fadeIn{
    0%{opacity:0}
    100%{opacity:1}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}

本地效果為：app/html5_animation/fadeIn.html

第二種：fadeInUp-動畫

CSS代碼為：

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

本地效果為：app/html5_animation/fadeInUp.html

第三種：fadeInDown-動畫

CSS代碼為：

.pages .p3 .itms .itm-01{ left: 0px;-webkit-animation: fadeInDown 2s ease-out 0.5s 1 both;}
.pages .p3 .itms .itm-02{left: 97px;-webkit-animation: fadeInDown 2s ease-out 1s 1 both;}
.pages .p3 .itms .itm-03{left: 192px;-webkit-animation: fadeInDown 2s ease-out 1.5s 1 both;}
.pages .p3 .itms .itm-04{ left:289px;-webkit-animation: fadeInDown 2s ease-out 2s 1 both;}
.pages .p3 .itms .itm-05{ left: 385px;-webkit-animation: fadeInDown 2s ease-out 2.5s 1 both;}
.pages .p3 .itms .itm-06{ left: 482px;-webkit-animation: fadeInDown 2s ease-out 3s 1 both;}
@-webkit-keyframes fadeInDown{
  0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
  100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInDown{
  0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
  100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}

本地效果為：app/html5_animation/fadeInDown.html

 第二種：fadeInLeft-動畫

CSS代碼為：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 50px; width: 100px;-webkit-animation: fadeInLeft 2s ease 1s 1 both;}
.item-02{ position: absolute; left: 120px; top: 50px; width: 100px;-webkit-animation: fadeInLeft 2s ease 1.8s 1 both;}
.item-03{ position: absolute; left: 220px; top: 50px; width: 100px;-webkit-animation: fadeInLeft 2s ease 2.6s 1 both;}
@-webkit-keyframes fadeInLeft{
    0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInLeft{
    0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}

本地效果為：app/html5_animation/fadeInLeft.html

第三種方式：fadeInRight-動畫

CSS代碼為：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: -50px; top: 0px; width: 1100px;-webkit-animation: fadeInRight 9s ease 0s 1 both;}
@-webkit-keyframes fadeInRight{
  0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
  100%{opacity:1;transform:none}
}
@keyframes fadeInRight{
  0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
  100%{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}

本地效果為：app/html5_animation/fadeInRight.html