vanishIn---动画

第一种方式：vanishIn-动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 50px; width: 400px;-webkit-animation: vanishIn 2s ease 0s 1 both;}
.cir-01{ position: absolute; left: 80px; top: 50px; width: 200px;-webkit-animation: vanishIn 2s ease 1s 1 both;}
@-webkit-keyframes vanishIn{
  0%{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:scale(2,2);-webkit-filter:blur(90px)}
  100%{opacity:1;-webkit-transform-origin:50% 50%;-webkit-transform:scale(1,1);-webkit-filter:blur(0px)}
}
@keyframes vanishIn{
  0%{opacity:0;transform-origin:50% 50%;transform:scale(2,2);-webkit-filter:blur(90px)}
  100%{opacity:1;transform-origin:50% 50%;transform:scale(1,1);-webkit-filter:blur(0px)}
}
.vanishIn{-webkit-animation-name:vanishIn;animation-name:vanishIn}

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

 

第二种方式：vanishOut--动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 50px; width: 400px;-webkit-animation: vanishOut 2s ease 0s 1 both;}
.cir-01{ position: absolute; left: 80px; top: 50px; width: 200px;-webkit-animation: vanishOut 2s ease 1s 1 both;}
@-webkit-keyframes vanishOut{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(20px)}
}
@keyframes vanishOut{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(20px)}
}
.vanishOut{-webkit-animation-name:vanishOut;animation-name:vanishOut}

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