css部分：
@-webkit-keyframes fadeIn {
0% {
opacity: 0.2;width:100%; /*初始状态 透明度为0.2大小为100%*/
}
10%{
opacity: 0.3;width:105%; /*补间动画10% 透明度0.3 大小105%*/
}
20%{
opacity: 0.4;width:110%;
}
30% {
opacity: 0.5;width:115%;
}
40%{
opacity: 0.6;width:125%;
}
50%{
opacity: 0.7;width:130%;
}
60%{
opacity: 0.8;width:135%;
}
70%{
opacity: 0.7;width:140%;
}
80%{
opacity: 0.6;width:145%;
}
90%{
opacity: 0.4;width:150%;
}
100% {
opacity: 0.3;width:155%; /*结尾状态 透明度为0.3,大小放大为155%*/
}
}
.sae{
-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 2s; /*动画持续时间*/
-webkit-animation-iteration-count: infinite; /*动画次数*/
-webkit-animation-delay: 0s; /*延迟时间*/
}
.sae1{
-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 2s; /*动画持续时间*/
-webkit-animation-iteration-count: infinite; /*动画次数*/
-webkit-animation-delay: 3s; /*延迟时间*/
}
.sae2{
-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 2s; /*动画持续时间*/
-webkit-animation-iteration-count: infinite; /*动画次数*/
-webkit-animation-delay: 5s; /*延迟时间*/
}
.sae3{
-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 2s; /*动画持续时间*/
-webkit-animation-iteration-count: infinite; /*动画次数*/
-webkit-animation-delay: 2s; /*延迟时间*/
}
html部分：
查看更多关于css3云朵飘动效果动画_html/css_WEB-ITnose的详细内容...