找回密码
 注册

QQ登录

只需一步,快速开始

查看: 3031|回复: 8

[CSS3] css3动画为何不能播放呢?只有鼠标放上去才行?

[复制链接]
发表于 2015-2-2 10:03:20 | 显示全部楼层 |阅读模式

 提示:您可以先修改部分代码再运行

发表于 2015-2-2 14:55:27 | 显示全部楼层
楼主你写的也不对呀,动画的那个在谁身体呢,偶是没有看到哇
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-2-2 15:20:41 | 显示全部楼层
atlantis2007 发表于 2015-2-2 14:55
楼主你写的也不对呀,动画的那个在谁身体呢,偶是没有看到哇

div的播放啊,让div自动扩大自消失,反复执行
回复 支持 反对

使用道具 举报

发表于 2015-2-3 10:49:49 | 显示全部楼层
  1. div:hover{transform:scale(10);opacity:0.0;}*/
复制代码

请把 :hover*/ 去掉

另外添加点:
  1. -webkit-animation: myfirst 3s ease 0 infinite normal;
  2. -ms-animation: myfirst 3s ease 0 infinite normal;
  3. -o-animation: myfirst 3s ease 0 infinite normal;
复制代码
回复 支持 反对

使用道具 举报

发表于 2015-2-3 11:15:39 | 显示全部楼层
楼上正解,楼主还是要先仔细看下动画的说明文档
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-2-3 13:50:43 | 显示全部楼层
baihe107 发表于 2015-2-3 10:49
请把 :hover 和 */ 去掉

另外添加点:

你写的只能对crome生效,但是针对火狐就不行了,我可能表达不清楚,我添加了hover的意思是说,火狐下hover能生效,但是css3动画就不行了,我把代码从新写下,你看看。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-2-3 13:58:52 | 显示全部楼层
我可能没有表达清楚,我意思是说,(chrom就不说了),在火狐浏览器下,这个css3不起作用,但是用hover就能使用scake(10),完整代码 从新写在下面,大家看看原因

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2015-2-4 10:12:47 | 显示全部楼层
火狐浏览器一向对 CSS 语法执行的比较严格,一个是缩写的顺序不能错,一个是单位不能省的别省。 animation-delay 的默认单位是 0S。这个 S 你省略了,火狐浏览器就看不到效果了。详情参见 MDN 文档 »
Initial value:    0s

反而你这个 0 和 normal 省略掉还好些,只要顺序别错。建议楼主多翻翻文档,熟悉熟悉写法。

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-2-4 16:32:18 | 显示全部楼层
baihe107 发表于 2015-2-4 10:12
火狐浏览器一向对 CSS 语法执行的比较严格,一个是缩写的顺序不能错,一个是单位不能省的别省。 animation- ...

谢谢你的提醒和帮助,确实有好多写法没弄好。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2021-1-20 06:17 , Processed in 0.062522 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表