CSS3css3 动画 animationn动画，循环间的延时执行该怎么弄

来源：蜘蛛抓取(WebSpider) 时间：2015-09-12 03:41 标签： css3 animation 延时
相关内容：
CSS3 animation-iteration-count 属性
说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
animation-iteration-count：infinite |
[ , infinite |
适用于：所有元素，包含伪对象:after和:before
继承性：无
infinite：
指定对象动画的具体循环次数
检索或设置对象动画的循环次数
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationIterationCount。
浅绿 = 支持
红色 = 不支持
墨绿 = 部分支持
橙色 = 实验性质
animation-iteration-count_CSS参考手册_web前端开发参考手册系列
太阳光晕将不停的闪烁：CSS3 animation动画，循环间的延时执行该怎么弄_百度知道
CSS3 animation动画，循环间的延时执行该怎么弄
提问者采纳
跟你举个例子吧，你在页面上面新建&div id=&loading&&&/div&#loading{
color:#000;
border-width:&4
height:&40
border-style:&
border-color:&#ccc&#eee&red&
border-radius:&24
-webkit-animation:&&loading&&1s&infinite&/***一秒循环执行**/}@-webkit-keyframes&&loading&{/**关键帧名称**/
0%{-webkit-transform:&rotate(0deg);}
100%{-webkit-transform:&rotate(360deg);}}/**只用了webkit你拥google打开就行了**/
其他类似问题
为您推荐：
css3的相关知识
其他1条回答
这个问题不是很清楚哦。。不过我会努力的。
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁收藏，1.3k 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
大体意思是我想让content2延时2s再向上淡入，但我设置了延时时间2s后，这样却导致一开始content2直接显示了，2s后再进行淡入的动画，能否让它一开始隐藏，2s后再淡入？
PS：想用纯CSS3来解决
#content2 {position: left: 50%; top: 100 width: 200 height: 300background: #-webkit-animation: animations2 3s linear 2s;}
@-webkit-keyframes animations2 {
0% { opacity: 0; top: 130}
100% {opacity: 1; top: 100}
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
知识点: animation-fill-mode
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
CSS3 动画是非常蛋疼的，首先应该要有这样的心理准备。
对于题主的情况，有两种解决方案都可以。
第一，再写一个设置 #content2 透明度为 0 的动画，时长 2s，刚好掩盖掉 animations2 的 2s 延时，让它们在 #content2 上同时播放。
第二，修改 animations2，不要延时 2s，而把这 2s 放到 keyframes 里面作为动画的一部分。在题目里面，可以把整个动画看成 5s，0%, 40% { opacity: 0; top: 130 }，100% 部分不变，效果和延时是一样的。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不是標準蛋疼，而是動畫延遲不是這麼用的。
延遲就是延遲，延遲的時候動畫沒有開始。
動畫沒有開始的時候什麼樣子，取決於其它 CSS 的定義。
但是，題主看你這架勢不是用動畫的啊，應該是用 transition 纔對。
不過你要是只想做一個出場動畫，那動畫就應當從頁面加載就開始執行，至於具體怎麼個運動，比如速度之類的，應當歸到動畫裏面。
或者，用 animation-fill-mode，指定了動畫前後要應用的樣式。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
6月10日 回答
以上回答的显得很蛋疼！
#content2{opacity:0;-webkit-animation: animations2 3s linear 2s 1}
同步到新浪微博
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
举报理由：
推广（招聘、广告、SEO 等）方面的内容
带有人身攻击、辱骂、仇恨等违反条款的内容
与已有问题重复（请编辑该提问指向已有相同问题）
不友善内容
答非所问，不符合答题要求
其他原因（请补充说明）
补充说明：
扫扫下载 App
SegmentFault
一起探索更多未知

我要回帖

更多关于 css3 animation 延时 的文章

 

随机推荐