CSS3实现动画实现次数怎样设置控制呢?
Admin 2022-11-02 群英技术资讯 260 次浏览
css3不是只能实现一次动画。
利用animation-iteration-count即可。
animation-iteration-count属性定义动画应该播放多少次。默认值为一。
语法
animation-iteration-count: value;
n 一个数字,定义应该播放多少次动画
infinite 指定动画应该播放无限次(永远)
示例如下:
<html> <head> <meta charset="utf-8"> <title>123</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 3s; animation-iteration-count:3; /* Safari and Chrome */ -webkit-animation:mymove 3s; -webkit-animation-iteration-count:3; } @keyframes mymove { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {top:0px;} to {top:200px;} } </style> </head> <body> <p><strong>注意:</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 animation-iteration-count 属性。</p> <div></div> </body> </html>
输出结果:
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
CSS的动画旋转时间如何控制?我们知道在CSS中,可以实现很多酷炫的动画效果,其中对于选中的效果大家应该不陌生,这篇我们就来介绍一下如何实现控制元素动画效果选中时间的方法,实现代码如下,感兴趣的朋友可以参考。
在css中,可以利用transform属性和“translateX()”函数将字往右调,“translateX()”函数用于定义元素在左右平移时的位置,只需要给文字元素添加“transform:translateX(向右移动值)”样式即可。
页面优化是对网页中的HTML代码进行必要的调整,可以有效地精简页面中的冗余代码,加快网页显示速度,减少网页占用搜索引擎服务器的存储空间,提高用户体验和搜索引擎友好性,当然也可以更好的突出页面的主题,提高页面的相关性。下面是我总结出来的编写html代码时需要注意的,仅供参考。 1、HTML标
方法:1、利用“元素{animation:名称 时间}”语句给元素绑定动画,并设置动画所需的时间;2、利用“@keyframes 名称{100%{height:改变后高度值;}}”语句,设置改变元素高度的动画动作,实现缓慢改变元素高度效果。
在前端网页开发的时候,我们常会用到一些渐变效果,这样可能让网站页面更美观。如果是直接使用图片渐变效果,那么修改起来是非常不放方便的,而且也不能支持缩放这些,但是使用css渐变就能够解决这样的问题。这篇文章就主要介绍基于Gecko引擎浏览器的CSS渐变效果实现。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008