shake、scaleDown、scaleUp--动画

第一种方式：shake动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 50px; top: 10px; width: 300px;-webkit-animation:shake 1.5s infinite ease-in-out;-moz-shake:start 1.5s infinite ease-in-out;animation:shake 1.5s infinite ease-in-out}
@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}
}
@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}
}
.shake{-webkit-animation-name:shake;animation-name:shake;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}

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

 

第二种方式：scaleDown-scaleUp--动画

CSS代码为：

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

本地效果为：app/html5_animation/scaleDown-scaleUp.html