pulse、puffIn、puffOut--动画

第一种方式为：pulse--动画

CSS代码为：

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

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

 

第二种方式为：puffIn--动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.pages .p3 .item-02{position:absolute; left: 50%;top: 150px; margin-left:-289px; width: 578px;}
.pages .p3 .itms{ position: absolute;left: 50%; top:0px; z-index: 5; width: 578px; margin-left: -289px;}
.pages .p3 .itms p{position: absolute; left: 100px; top: 0; width: 400px;}
.pages .p3 .itms .itm-01{ z-index:1;-webkit-animation: puffIn 3s ease 0s 1 both;}
.pages .p3 .itms .itm-02{left:105px;top: 5px; z-index: 2;-webkit-animation: puffIn 3s ease 2s 1 both;}
.pages .p3 .itms .itm-03{left:110px; top:10px;z-index: 3;-webkit-animation: puffIn 3s ease 4s 1 both;}
.pages .p3 .itms .itm-04{left:115px;top:15px;z-index: 4;-webkit-animation: puffIn 3s ease 6s 1 both;}
.pages .p3 .itms .itm-05{left:120px; top:20px;z-index: 5;-webkit-animation: puffIn 3s ease 8s 1 both;}
.pages .p3 .itms .itm-06{left:125px;top:25px;z-index: 6;-webkit-animation: puffIn 3s ease 10s 1 both;}
@-webkit-keyframes puffIn{
    0%{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:scale(2,2);-webkit-filter:blur(2px)}
    100%{opacity:1;-webkit-transform-origin:50% 50%;-webkit-transform:scale(1,1);-webkit-filter:blur(0px)}
}
@keyframes puffIn{
    0%{opacity:0;transform-origin:50% 50%;transform:scale(2,2);filter:blur(2px)}
    100%{opacity:1;transform-origin:50% 50%;transform:scale(1,1);filter:blur(0px)}
}
.puffIn{-webkit-animation-name:puffIn;animation-name:puffIn}

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

 

第三种方式为：puffOut--动画

CSS代码：

.pages .p3 img{ width: 100%;}
.pages .p3 .item-02{position:absolute; left: 50%;top: 150px; margin-left:-289px; width: 578px;}
.pages .p3 .itms{ position: absolute;left: 50%; top:0px; z-index: 5; width: 578px; margin-left: -289px;}
.pages .p3 .itms p{position: absolute; left: 100px; top: 0; width: 400px;}
.pages .p3 .itms .itm-01{ z-index:1;-webkit-animation: puffOut 3s ease 0s 1 both;}
.pages .p3 .itms .itm-02{left:105px;top: 5px; z-index: 2;-webkit-animation: puffOut 3s ease 2s 1 both;}
.pages .p3 .itms .itm-03{left:110px; top:10px;z-index: 3;-webkit-animation: puffOut 3s ease 4s 1 both;}
.pages .p3 .itms .itm-04{left:115px;top:15px;z-index: 4;-webkit-animation: puffOut 3s ease 6s 1 both;}
.pages .p3 .itms .itm-05{left:120px; top:20px;z-index: 5;-webkit-animation: puffOut 3s ease 8s 1 both;}
.pages .p3 .itms .itm-06{left:125px;top:25px;z-index: 6;-webkit-animation: puffOut 3s ease 10s 1 both;}
@-webkit-keyframes puffOut{0%{opacity:1;-webkit-transform-origin:50% 50%;-webkit-transform:scale(1,1);-webkit-filter:blur(0px)}
100%{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:scale(2,2);-webkit-filter:blur(2px)}
}
@keyframes puffOut{0%{opacity:1;transform-origin:50% 50%;transform:scale(1,1);-webkit-filter:blur(0px)}
100%{opacity:0;transform-origin:50% 50%;transform:scale(2,2);-webkit-filter:blur(2px)}
}
.puffOut{-webkit-animation-name:puffOut;animation-name:puffOut}

本兮效果为：app/html5_animation/puffOut.html