animation 动画

&:hover{
        img{
//          animation: test3 2s 5s both 2 ;
            //动画的名称
            animation-name: test3;
            //动画时长
            animation-duration: 2s;
            //动画延时
            animation-delay: 5s;
            //动画的播放次数,infinite表示无限次的播放，也可以直接写播放次数
            animation-iteration-count: infinite;
            //是否要反向运动，如果设置了，反向运动也是一次运动,alternate表示反向
            animation-direction: alternate;
            //运动的时间曲线
            animation-timing-function: ease;
            //通话结束，停留于最后一个状态both，backwards
            animation-fill-mode: both;
            //当前运动的状态，暂停的paused、runing运动的
//          animation-play-state: paused;
            //简写形式
//          animation: test3 2s both;
            animation: test3 2s alternate infinite  both ease ;
        }
    }
@keyframes test{
    from{
         top:100px;
        left:100px;
    }
    to{
         top:300px;
        left:1000px;
    }
}
@keyframes test1{
    0%{
        top:100px;
        left:100px;
    }
    10%{
        top:200px;
        left:200px;
    }
    50%{
        top:500px;
        left:500px;
    }
    100%{
        top:300px;
        left:1000px;
    }
}
@keyframes test3{
    0%{
        transform:translateX(100px);
        opacity: 0;
    }
    10%{
         transform:translateY(100px);
         opacity: 0.1;
    }
    50%{
        transform:translateX(1000px);
        opacity: 0.5;
    }
//  100%{
//       transform:translateY(500px);
//       opacity: 1;
//  }