.menu img{
    transition: transform 1.5s;  
    /* 动画的效果时间  */
}
/* 第一段动画，写在one这个class这里 */
.m1-img2.one{ 
    /* animation g规定动画的时间，规定动画的时长 */
    animation: m1-img2-one 1s ;
}

/* 第二段动画，写在two这个class这里 */
.m1-img2.two{ 
    /* animation g规定动画的时间，规定动画的时长 */
    animation: m1-img2-two 1.5s infinite linear ;
}

@keyframes m1-img2-one
{
    0%{
        transform:translate(-30px,100px) scale(.6);
        opacity: 0;
    }
    50%{
        transform:translate(0,0) scale(1);
        opacity: 1;
    };
}
@keyframes m1-img2-two
{
    50%{
        transform:translate(0,5px);
    };
}

/* 菜单1的元素2 */
/* 第一段动画，one */
.m1-img3.one{
    animation: m1-img3-one 1s;
}
/* 第二段动画，two */
.m1-img3.two{
    /* animation: m1-img3-two 1.5s infinite linear; */
    animation: m1-img2-two 1.5s infinite linear;
}
@keyframes m1-img3-one
{
    0%{
        transform: translate(-10px,100px) scale(.6);
        opacity: 0;
    }
    50%{
        transform: translate(0,0) scale(1);
    };
}

  /* 菜单1元素3 m1-img4 */
  .m1-img4.one{
      animation: m1-img4-one 1s;
  }
  .m1-img4.two{
      animation: m1-img2-two 1.5s infinite linear;
  }
  @keyframes m1-img4-one
  {
      0%{
          transform: translate(-10px,100px) scale(.6);
          opacity: 0;
      }
      50%{
          transform: translate(0,0) scale(1);
      };
  }
  /* 菜单1元素4 m1-img5 */
  .m1-img5.one{
      animation: m1-img5-one 1s;
  }
  .m1-img5.two{
      animation: m1-img2-two 1.5s infinite linear;
  }
  @keyframes m1-img5-one
  {
      0%{
            transform: translate(-10px,100px) scale(.6);
            opacity: 0;
      }
      50%{
          transform: translate(0,0) scale(1);
      };
  }

  /* 菜单1的5元素m1-img6 */
  .m1-img6.one{
      animation: m1-img6-one 1s;
  }
  .m1-img6.two{
      animation: m1-img2-two 1.5s infinite linear;
  }
  @keyframes m1-img6-one
  {
      0%{
          transform: translate(-10px,100px) scale(.6);
          opacity: 0;
      }
      50%{
          transform: translate(0,0) scale(1);
      };
  }

  /* 菜单2 元素1 m2-img2 */
  .m2-img2.one{
      animation: m2-img2-one 1s;
  }
  .m2-img2.two{
      animation: m1-img2-two 1.5s infinite linear;
  }
  @keyframes m2-img2-one
  {
      0%{
          transform: translate(-10px,100px) scale(.6);
          opacity: 0;
      }
      50%{
          transform: translate(0,0) scale(1);
      };
  }
  /* 菜单2 元素2 m2-img3 */
  .m2-img3.one{
    animation: m2-img2-one 1s;
}
.m2-img3.two{
    animation: m1-img2-two 1.5s infinite linear;
}
@keyframes m2-img3-one
{
    0%{
        transform: translate(-10px,100px) scale(.6);
        opacity: 0;
    }
    50%{
        transform: translate(0,0) scale(1);
    };
}
/* 菜单2 元素3 m2-img4 */
.m2-img4.one{
    animation: m2-img2-one 1s;
}
.m2-img4.two{
    animation: m1-img2-two 1.5s infinite linear;
}
@keyframes m2-img4-one
{
    0%{
        transform: translate(-10px,100px) scale(.6);
        opacity: 0;
    }
    50%{
        transform: translate(0,0) scale(1);
    };
}
/* 菜单2 元素4 m2-img5 */
.m2-img5.one{
    animation: m2-img5-one 1s;
}
.m2-img5.two{
    animation: m1-img2-two 1.5s infinite linear;
}
@keyframes m2-img5-one
{
    0%{
        transform: translate(-10px,100px) scale(.6);
        opacity: 0;
    }
    50%{
        transform: translate(0,0) scale(1);
    };
}
/* 菜单2 元素5 m2-img6 */
.m2-img6.one{
    animation: m2-img6-one 1s;
}
.m2-img6.two{
    animation: m1-img2-two 1.5s infinite linear;
}
@keyframes m2-img6-one
{
    0%{
        transform: translate(-10px,100px) scale(.6);
        opacity: 0;
    }
    50%{
        transform: translate(0,0) scale(1);
    };
}


/* 菜单3 元素1 m3-img2 */
.m3-img2.one{
    animation: m3-img2-one 1s;
}
.m3-img2.two{
    animation: m1-img2-two 1.5s infinite linear;
}
@keyframes m3-img2-one
{
    0%{
        transform: translate(-10px,100px) scale(.6);
        opacity: 0;
    }
    50%{
        transform: translate(0,0) scale(1);
    };
}
/* 菜单3 元素2 m3-img3 */
.m3-img3.one{
    animation: m3-img3-one 1s;
}
.m3-img3.two{
    animation: m1-img2-two 1.5s infinite linear;
}
@keyframes m3-img3-one
{
    0%{
        transform: translate(-10px,100px) scale(.6);
        opacity: 0;
    }
    50%{
        transform: translate(0,0) scale(1);
    };
}
/* 菜单3 元素3 m3-img4 */
.m3-img4.one{
    animation: m3-img4-one 1s;
}
.m3-img4.two{
    animation: m1-img2-two 1.5s infinite linear;
}
@keyframes m3-img4-one
{
    0%{
        transform: translate(-10px,100px) scale(.6);
        opacity: 0;
    }
    50%{
        transform: translate(0,0) scale(1);
    };
}
/* 菜单3 元素4 m3-img5 */
.m3-img5.one{
    animation: m3-img5-one 1s;
}
@keyframes m3-img5-one
{
    0%{
        transform: translate(-30px,-30px) scale(.6);
        opacity: 0;
    }
    50%{
        transform: translate(0,0) scale(1);
    };
}
/* 菜单3 元素5 m3-img6 */
.m3-img6.one{
    animation: m3-img6-one 1s;
}
@keyframes m3-img6-one
{
    0%{
        transform: translate(-40px,-40px) scale(.6);
        opacity: 0;
    }
    100%{
        transform: translate(0,0) scale(1);
        opacity: 1;
    };
}




/* 轮播图1的缩放 动态图片 */
.o.one{
    animation: o-one 1s;
}
.o.two{
    animation: m1-img2-two 1.5s infinite linear;
}
@keyframes o-one
{
    0%{
        transform:translate(-50px, -50px) scale(.6);
        opacity: 0;
    }
    50%{
        transform: translate(0,0) scale(1);
    };
}

.t.one{
    animation: t-one 1s;
}
.t.two{
    animation: m1-img2-two 1.5s infinite linear;
}
@keyframes t-one
{
    0%{
        transform:translate(-50px, -50px) scale(.6);
        opacity: 0;
    }
    50%{
        transform: translate(0,0) scale(1);
    };
}

.th.one{
    animation: th-one 1s;
}
.th.two{
    animation: th-two 1.5s infinite linear;
}
@keyframes th-one
{
    0%{
        transform:translate(-50px, -50px) scale(.6);
        opacity: 0;
    }
    50%{
        transform: translate(0,0) scale(1);
    };
}
@keyframes th-two
{
    50%{
        transform:translate(0,11px);
    };
}