怎么解决利用hover触发的动画一直持续进行的问题

Question

如题，css的代码如下：
.pic1 a{

display:block;
width:100%;
height:100%;
text-indent:-999em;
background-image:url(2.png);
}

.pic1 a:hover{

animation:flip 1s 0s ease both;
transition:all 0s .2s;
}

@-webkit-keyframes flip

{
  0%{   transform:perspective(300px)
        rotate3d(0,1,0,360deg);
        transition-timing-function:ease-in;
        opacity:1}

   20%{
       transform:perspective(300px)
       rotate3d(0,1,0,270deg);
       transition-timing-function:ease-in;
       opacity:1}

   21%{
       transform:perspective(300px)
       rotate3d(0,1,0,90deg);
       transition-timing-function:ease-in;
       opacity:1}

   40%{
       transform:perspective(300px)
       rotate3d(0,1,0,-40deg);
       transition-timing-function:ease-in
       opacity:1}

   60%{
       transform:perspective(300px) 
       rotate3d(0,1,0,20deg);
       opacity:1}

   80%{
       transform:perspective(300px) 
       rotate3d(0,1,0,-5deg)
       opacity:1}

   100%{-webkit-transform:perspective(300px);
        transform:perspective(300px)
        opacity:1}
        }

先谢过各位大佬了0.0

Answer 1

.pic1原地不动，移入.pic1变化，只让a变化就行了

.pic1:hover a{

animation:flip 1s 0s ease both;
transition:all 0s .2s;
}

Answer 2

让外层的元素触发伪类，里面的元素进行动画即可。
一般简单的动画效果都可以这样操作，父元素触发，子元素进行动画。