fadeOut、fadeOutUp、fadeOutDown、fadeOutLeft、fadeOutRight---动画

第一种方式：fadeOutUp-fadeOutDown动画

CSS代码为：

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

本地效果为：app/html5_animation/fadeOutUp-fadeOutDown.html

 

第二种方式：fadeOutLeft-fadeOutRight动画

CSS代码为：

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

本地效果为：app/html5_animation/fadeOutLeft-fadeOutRight.html

 

第三种方式：fadeOut动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 10px; width: 300px;-webkit-animation: fadeOut 2s ease 0s 1 both;}
.item-02{ position: absolute; left: 250px; top: 300px; width: 300px;-webkit-animation: fadeOut 2s ease 1s 1 both;}
@-webkit-keyframes fadeOut{0%{opacity:1}
100%{opacity:0}
}
@keyframes fadeOut{0%{opacity:1}
100%{opacity:0}
}
.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}

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