css3的animation动画播放完后如何停止在最后的状态

发布时间:2020-05-14 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了css3的animation动画播放完后如何停止在最后的状态脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

《css3的animation动画播放完后如何停止在最后的状态》要点:
本文介绍了css3的animation动画播放完后如何停止在最后的状态,希望对您有用。如果有疑问,可以联系我们。

以前很多网页特效,需要用javascript或jquery来完成,但是现在只要css3就可以完成了。代码简化很多,而且现在浏览器大多都能支持CSS3了。

比如用css3的animation制作一个鼠标移上去图片出现文字标题,移走标题消失。


代码:

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


效果图:

css3的animation动画播放完后如何停止在最后的状态


但是,这里有两个问题需要做好:

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;}
}

总结

以上是脚本之家为你收集整理的css3的animation动画播放完后如何停止在最后的状态全部内容,希望文章能够帮你解决css3的animation动画播放完后如何停止在最后的状态所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478