js动画形式

1 从上而下出现：
animation:dafuzi_anim_puffIn 2s 3s both 1;   延时三秒执行两秒
@keyframes dafuzi_anim_puffIn  
{
	 0% {
		 opacity: 0;
	    transform: translateY(100%);
	  }
	  100% {
		opacity: 1;
	    transform: translateY(0);
	  }
从上而下消失：
@keyframes dafuzi_anim_sahngssheng
{
	0% {
			 opacity: 1;
			transform: translateY(0);
	 }
	 100% {
			opacity: 0;
			transform: translateY(-100%);
	 }
}
2 从下而上出现：
@keyframes dafuzi_anim_puffIn  
{
	 0% {
		 opacity: 0;
	    transform: translateY(-100%);
	  }
	  100% {
		opacity: 1;
	    transform: translateY(0);
	  }



// 从上而下出现 一开始 transform:translateY(-100%);
@keyframes fadeInY0
{
    0%{opacity: 0;} 
    100%{opacity: 1;transform:translateY(0%);} 
}


3随机从上而下飞花朵
@keyframes fallDown1
{
    0%{top:0%;left:10%;}
	10%{top:10%;left:10%;}
	20%{top:20%;left:20%;} 
	30%{top:30%; left:30%;} 
	40%{top:40%;left:40%;} 
	50%{top:50%;left:50%;} 
	60%{top:60%;left:60%;} 
	70%{top:70%;left:70%;} 
	80%{top:80%;left:80%;} 
	90%{top:90%;left:90%;} 
    100%{top:100%;left:100%;} 
}
@keyframes fallDown2
{
    0%{top: 0%;left:10%;}
    10%{top: 10%;left:10%;}
    20%{top: 20%;left:20%;} 
    30%{top: 30%;left:30%;} 
    40%{top: 40%; left:40%;} 
    50%{top:50%;left:50%;} 
    60%{top:60%;left:40%;} 
    70%{top:70%;left:30%;} 
    80%{top:80%;left:20%;} 
    90%{top:90%;left:10%;} 
    100%{top:100%;left:0%;} 
}
@keyframes fallDown3
{
    0%{top: 0%;left:40%;}
    10%{top: 10%;left:50%;}
    20%{top: 20%;left:60%;} 
    30%{top:30%;left:70%;} 
    40%{top:40%;left:80%;} 
    50%{top: 50%;left:90%;} 
    60%{top:60%;left:80%;} 
    70% {top:70%;left:70%;} 
    80%{top: 80%;left:60%;} 
    90%{top:90%;left:50%;} 
    100%{top:100%;left:40%;} 
}
@keyframes fallDown4
{
    0% {top:0%;left:80%;}
    10%{top:10%;left:70%;}
    20%{top:20%;left:60%;} 
    30%{top:30%;left:50%;} 
    40%{top:40%;left:40%;} 
    50%{top:50%;left:30%;} 
    60%{top:60%;left:20%;} 
    70%{top:70%;left:10%;} 
    80%{top:80%;left:0%;} 
    90%{top: 90%;left:10%;} 
    100%{top:100%;left:20%;} 
}
@keyframes fallDown5
{
    0% {top:0%;left:30%;}
    10%{top:10%;left:40%;}
    20%{top:20%;left:50%;} 
    30%{top:30%;left:60%;} 
    40%{top:40%;left:70%;} 
    50%{top:50%;left:80%;} 
    60%{top:60%;left:90%;} 
    70%{top:70%;left:80%;} 
    80%{top:80%;left:70%;} 
    90%{top: 90%;left:60%;} 
    100%{top:100%;left:50%;} 
}
@keyframes fallDown6
{
    0% {top:0%;left:10%;}
    10%{top:10%;left:20%;}
    20%{top:20%;left:30%;} 
    30%{top:30%;left:40%;} 
    40%{top:40%;left:50%;} 
    50%{top:50%;left:60%;} 
    60%{top:60%;left:70%;} 
    70%{top:70%;left:80%;} 
    80%{top:80%;left:80%;} 
    90%{top: 90%;left:90%;} 
    100%{top:100%;left:80%;} 
}
@keyframes fallDown7
{
    0% {top:0%;left:90%;}
    10%{top:10%;left:90%;}
    20%{top:20%;left:80%;} 
    30%{top:30%;left:80%;} 
    40%{top:40%;left:70%;} 
    50%{top:50%;left:70%;} 
    60%{top:60%;left:60%;} 
    70%{top:70%;left:60%;} 
    80%{top:80%;left:50%;} 
    90%{top: 90%;left:50%;} 
    100%{top:100%;left:40%;} 
}
@keyframes fallDown8
{
    0% {top:0%;left:10%;}
    10%{top:10%;left:10%;}
    20%{top:20%;left:20%;} 
    30%{top:30%;left:20%;} 
    40%{top:40%;left:30%;} 
    50%{top:50%;left:30%;} 
    60%{top:60%;left:40%;} 
    70%{top:70%;left:40%;} 
    80%{top:80%;left:50%;} 
    90%{top: 90%;left:50%;} 
    100%{top:100%;left:60%;} 
}
4 音乐播放器转圈
@keyframes musicPlay
{
    0%{-webkit-transform:rotate(0deg);}
	10%{-webkit-transform:rotate(36deg);}
	20%{-webkit-transform:rotate(72deg);}
	30%{-webkit-transform:rotate(108deg);}
	40%{-webkit-transform:rotate(144deg);}
	50%{-webkit-transform:rotate(180deg);}
	60%{-webkit-transform:rotate(216deg);}
	70%{-webkit-transform:rotate(252deg);}
	80%{-webkit-transform:rotate(288deg);}
	90%{-webkit-transform:rotate(324deg);}
	100%{-webkit-transform:rotate(360deg);}
}
5 垂直旋转
@keyframes renwu_roateY360
{
	// 0%{transform:scale(0.5) rotateZ(0deg) translateY(100%);}
	100%{transform: rotate3d(1,1,1,360deg); /* 绕X轴顺时针旋转45度 */}
	
}
6 灯笼左右摇摆
animation:denglongLeftRightDong 1.5s linear 0.8s both infinite;transform-origin: 50% 0%;
@keyframes denglongLeftRightDong
{
	 0%, 100%{
	    -webkit-transform: rotate(-10deg);
	  }
	  50%{
	    -webkit-transform: rotate(10deg);
	  }
	
}
灯笼放大缩小
@keyframes denglongLeftRightDong
{

	 0%, 100%{
	     -webkit-transform: scale(1);
	   }
	   50%{
	     -webkit-transform: scale(1.5);
	   }
	
}
7 图片放大或者缩小消失（放大给人出屏幕的感觉 缩小给人进入屏幕的感觉）
position: absolute;width:100vw;height:100vh;left: 0%;top:0%;animation: puffOut 2.5s ease 3.0s both 1;

@keyframes puffOut
{
	0%{opacity: 1;scale:1}
	100%{opacity: 0;scale:2} 
}