鍍金池/ 問答/HTML/ 怎么解決利用hover觸發(fā)的動畫一直持續(xù)進行的問題

怎么解決利用hover觸發(fā)的動畫一直持續(xù)進行的問題

如題，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

回答
編輯回答
落殤

.pic1原地不動，移入.pic1變化，只讓a變化就行了

.pic1:hover a{

animation:flip 1s 0s ease both;
transition:all 0s .2s;
}
2018年3月20日 14:57
編輯回答
蟲児飛

讓外層的元素觸發(fā)偽類，里面的元素進行動畫即可。
一般簡單的動畫效果都可以這樣操作，父元素觸發(fā)，子元素進行動畫。

2018年6月9日 15:13