《css3的animation動畫播放完后如何停止在最后的狀態》要點：
本文介紹了css3的animation動畫播放完后如何停止在最后的狀態，希望對您有用。如果有疑問，可以聯系我們。

相關主題：CSS2和CSS3特效

以前很多網頁特效，需要用javascript或jquery來完成，但是現在只要css3就可以完成了。代碼簡化很多，而且現在瀏覽器大多都能支持CSS3了。

比如用css3的animation制作一個鼠標移上去圖片出現文字標題，移走標題消失。

代碼：

<div class="hideImgTitle posrelative">
   <img src="/modules/2017052117572601028_t.jpg" border="0" class="wow bounceIn" alt="vephp.com 教程">
   <a href="#" class="hideTitle">vephp.com 教程</a>
</div>

效果圖：

但是，這里有兩個問題需要做好：

1、動畫播放幾次？這需要用animation-iteration-count來控制，一般設置為1.

2、一旦動畫完成元素會回到原來的樣子：

如果你想讓元素保持最后一個狀態的樣子，也就是保持標題顯示狀態，直到鼠標移開，這可以用animation-fill-mode 來設置

CSS3 屬性 animation-fill-mode 用來定義元素在動畫結束后的樣子。

animation-fill-mode 的默認值是 none，也就是在動畫結束之后不做任何改動，

如果把animation-fill-mode 改成 forwards 則動畫結束后元素的樣式會變成動畫最后一個關鍵幀所規定的樣式。

主要代碼：

.hideImgTitle:hover a{
       animation:mymove 1s 1;
       -webkit-animation:mymove 1s 1; /*Safari and Chrome*/
       animation-fill-mode:forwards;
       -webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
}
@keyframes mymove
{
       from {bottom: -70px;}
       to {bottom: 0px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
       from {bottom: -70px;}
       to {bottom: 0px;}
}

轉載請注明本頁網址：
http://www.snjht.com/jiaocheng/134.html