淘宝模块实现CSS3动画特效

schema.json 表单

    "donghua": {
      "type": "OfficialSelect",
      "dataName": "donghua",
      "label": {
        "description": {
          "desc": ""
        },
        "title": "图片动效设置"
      },
      "wrapperStyle": {},
      "style": {},
      "invisible": false,
      "extension": {
        "placeholder": "无动效",
        "dataSource": [
          {
            "label": "无动效",
            "value": "adx1"
          },
          {
            "label": "左右移动",
            "value": "adx2"
          },  {
            "label": "上下移动",
            "value": "adx3"
          },          {
            "label": "闪烁",
            "value": "adx4"
          },          {
            "label": "Q弹晃动",
            "value": "adx5"
          },          {
            "label": "橡皮筋",
            "value": "adx6"
          },          {
            "label": "左右摇摆(3度)",
            "value": "adx7"
          },          {
            "label": "左右摇摆(5度)",
            "value": "adx8"
          },          {
            "label": "左右摇摆(10度)",
            "value": "adx9"
          },          {
            "label": "左右摇摆(20度)",
            "value": "adx10"
          },          {
            "label": "左右摇摆(30度)",
            "value": "adx11"
          },          {
            "label": "旋转(顺时针)",
            "value": "adx12"
          },          {
            "label": "旋转(逆时针)",
            "value": "adx13"
          }
        ],
        "defaultValue": "adx2"
      },
      "validateProps": {
        "dataType": "Default",
        "required": false,
        "validate": false
      }
    },

index.css

.adx1{font-style: normal;}
.adx2{  
  /* 动画名称 动画时长 延时时间 匀速 无限循环 逆播 */ 
  animation: changes2 1s 0s linear infinite normal;
}
.adx3{  
  animation: changes3 1s 0s linear infinite normal;
}
.adx4{  
  animation: changes4 1s 0s linear infinite normal;
}
.adx5{  
  animation: changes5 1s 0s linear infinite normal;
}
.adx6{  
  animation: changes6 1s 0s linear infinite normal;
}
.adx7{  
  animation: changes7 1s 0s linear infinite normal;
}
.adx8{  
  animation: changes8 1s 0s linear infinite normal;
}
.adx9{  
  animation: changes9 1s 0s linear infinite normal;
}
.adx10{  
  animation: changes10 1s 0s linear infinite normal;
}
.adx11{  
  animation: changes11 1s 0s linear infinite normal;
}
.adx12{  
  animation: changes12 1s 0s linear infinite normal;
}
.adx13{  
  animation: changes13 1s 0s linear infinite normal;
}


/*动画集名称*/
		/* @keyframes changes {
			from {
				transform: rotate(15deg)
			}
			to {
				transform: rotate(-10deg)
			}
    }
     */ 


/*动画集合 可以自定义动画在百分之几，比如你可以定义0%,10%,20%,30%,33%.....,如果只定义两个，也可以使用from,to来代替*/

/*左右移动*/
@keyframes changes2 {
  0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
  25% {opacity:1;-webkit-transform:translate(3px,0px) scale(1,1) rotate(0deg);transform:translate(3px,0px) scale(1,1) rotate(0deg);}
  50% {opacity:1;-webkit-transform:translate(0px,0px) scale(1,1) rotate(0deg);transform:translate(0px,0px) scale(1,1) rotate(0deg);}
  75% {opacity:1;-webkit-transform:translate(-3px,0px) scale(1,1) rotate(0deg);transform:translate(-3px,0px) scale(1,1) rotate(0deg);}
  100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
}
/*上下移动*/
@keyframes changes3 {
  0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
  25% {opacity:1;-webkit-transform:translate(0,3px) scale(1,1) rotate(0deg);transform:translate(0,3px) scale(1,1) rotate(0deg);}
  50% {opacity:1;-webkit-transform:translate(0,0px) scale(1,1) rotate(0deg);transform:translate(0,0px) scale(1,1) rotate(0deg);}
  75% {opacity:1;-webkit-transform:translate(0,-3px) scale(1,1) rotate(0deg);transform:translate(0,-3px) scale(1,1) rotate(0deg);}
  100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
}
/*闪烁*/
@keyframes changes4 {
  0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
  50% {opacity:0;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
  100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
}
/*Q弹晃动*/
@keyframes changes5{
  0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%,20% { -webkit-transform: scale3d(.9,.9,.9) rotate(-3deg); transform: scale3d(.9,.9,.9) rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg); transform: scale3d(1.1,1.1,1.1) rotate(3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg); transform: scale3d(1.1,1.1,1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); transform: scaleX(1) }
}
/*橡皮筋*/
@keyframes changes6{
  0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 
  30% { -webkit-transform: scale3d(1.25,.75,1); transform: scale3d(1.25,.75,1) } 
  40% { -webkit-transform: scale3d(.75,1.25,1); transform: scale3d(.75,1.25,1) } 
  50% { -webkit-transform: scale3d(1.15,.75,1); transform: scale3d(1.15,.75,1) } 
  65% { -webkit-transform: scale3d(.95,1.05,1); transform: scale3d(.95,1.05,1) } 
  75% { -webkit-transform: scale3d(1.05,.95,1); transform: scale3d(1.05,.95,1) } 
  to { -webkit-transform: scaleX(1); transform: scaleX(1) }
}
/*左右摇摆3度*/
@keyframes changes7{
  0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
  25% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(3deg);transform:translate(0,0) scale(1,1) rotate(3deg);}
  50% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
  75% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(-3deg);transform:translate(0,0) scale(1,1) rotate(-3deg);}
  100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
}
/*左右摇摆5度*/
@keyframes changes8{
  0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
  25% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(5deg);transform:translate(0,0) scale(1,1) rotate(5deg);}
  50% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
  75% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(-5deg);transform:translate(0,0) scale(1,1) rotate(-5deg);}
  100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
}
/*左右摇摆10度*/
@keyframes changes9{
  0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
  25% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(10deg);transform:translate(0,0) scale(1,1) rotate(10deg);}
  50% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
  75% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(-10deg);transform:translate(0,0) scale(1,1) rotate(-10deg);}
  100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
}
/*左右摇摆20度*/
@keyframes changes10{
  0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
  25% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(20deg);transform:translate(0,0) scale(1,1) rotate(20deg);}
  50% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
  75% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(-20deg);transform:translate(0,0) scale(1,1) rotate(-20deg);}
  100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
}
/*左右摇摆30度*/
@keyframes changes11{
  0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
  25% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(30deg);transform:translate(0,0) scale(1,1) rotate(30deg);}
  50% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
  75% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(-30deg);transform:translate(0,0) scale(1,1) rotate(-30deg);}
  100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
}
/*旋转（顺时针）*/
@keyframes changes12{
  0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
  100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(360deg);transform:translate(0,0) scale(1,1) rotate(360deg);}
}
/*旋转（逆时针）*/
@keyframes changes13{
  0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
  100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(-360deg);transform:translate(0,0) scale(1,1) rotate(-360deg);}
}