css3动画为何不能播放呢？只有鼠标放上去才行？

chenglidian · 发表于 2015-2-2 10:03:20

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

atlantis2007 · 发表于 2015-2-2 14:55:27

楼主你写的也不对呀，动画的那个在谁身体呢，偶是没有看到哇

chenglidian · 发表于 2015-2-2 15:20:41

atlantis2007 发表于 2015-2-2 14:55
楼主你写的也不对呀，动画的那个在谁身体呢，偶是没有看到哇

div的播放啊，让div自动扩大自消失，反复执行

baihe107 · 发表于 2015-2-3 10:49:49

div:hover{transform:scale(10);opacity:0.0;}*/

复制代码

请把 :hover 和 */ 去掉

另外添加点：

-webkit-animation: myfirst 3s ease 0 infinite normal;
-ms-animation: myfirst 3s ease 0 infinite normal;
-o-animation: myfirst 3s ease 0 infinite normal;

复制代码

Dszls · 发表于 2015-2-3 11:15:39

楼上正解，楼主还是要先仔细看下动画的说明文档

chenglidian · 发表于 2015-2-3 13:50:43

baihe107 发表于 2015-2-3 10:49
请把 :hover 和 */ 去掉

另外添加点：

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

chenglidian · 发表于 2015-2-3 13:58:52

我可能没有表达清楚，我意思是说，（chrom就不说了），在火狐浏览器下，这个css3不起作用，但是用hover就能使用scake(10),完整代码从新写在下面，大家看看原因

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	body{overflow:hidden}
	div{
		width:50px;height:50px;
		background:#ccc;
		margin-top:400px;
		margin-left:400px;
		text-align:center;
		line-height:45px;
		border-radius:50px;
		transition:2s;
		-moz-animation: myfirst 3s ease 0 infinite normal;
		-webkit-animation: myfirst 3s ease 0 infinite normal;
		-ms-animation: myfirst 3s ease 0 infinite normal;
		-o-animation: myfirst 3s ease 0 infinite normal;
	}
	div:hover{transform:scale(10);opacity:0.0;}
	@-moz-keyframes myfirst{
		0%{transform:scale(0);opacity:1;}
		100%{transform:scale(10);opacity:0.0}
	}
	@-webkit-keyframes myfirst{
		0%{transform:scale(0);opacity:1;}
		100%{transform:scale(10);opacity:0.0}
	}
	@-ms-keyframes myfirst{
		0%{transform:scale(0);opacity:1;}
		100%{transform:scale(10);opacity:0.0}
	}
	@-o-keyframes myfirst{
		0%{transform:scale(0);opacity:1;}
		100%{transform:scale(10);opacity:0.0}
	}
</style>
</head>

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

baihe107 · 发表于 2015-2-4 10:12:47

火狐浏览器一向对 CSS 语法执行的比较严格，一个是缩写的顺序不能错，一个是单位不能省的别省。 animation-delay 的默认单位是 0S。这个 S 你省略了，火狐浏览器就看不到效果了。详情参见 MDN 文档 »

Initial value: 0s

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>demo</title>
<style type="text/css">
	body {overflow:hidden}
	div {
		width:50px;height:50px;
		background:#ccc;
		margin-top:400px;
		margin-left:400px;
		text-align:center;
		line-height:45px;
		border-radius:50px;
		-webkit-animation: myfirst 3s ease 0 infinite normal;
		-moz-animation: myfirst 3s ease 0s infinite normal;
		-ms-animation: myfirst 3s ease 0 infinite normal;
		-o-animation: myfirst 3s ease 0 infinite normal;
		animation: myfirst 3s ease 0 infinite normal;
	}
	@-webkit-keyframes myfirst{
		0%{-webkit-transform:scale(0);opacity:1;}
		100%{-webkit-transform:scale(10);opacity:0.0}
	}
	@-moz-keyframes myfirst{
		0%{-moz-transform:scale(0);opacity:1;}
		100%{-moz-transform:scale(10);opacity:0.0}
	}
	@-ms-keyframes myfirst{
		0%{-ms-transform:scale(0);opacity:1;}
		100%{-ms-transform:scale(10);opacity:0.0}
	}
	@-o-keyframes myfirst{
		0%{-o-transform:scale(0);opacity:1;}
		100%{-o-transform:scale(10);opacity:0.0}
	}
	@keyframes myfirst{
		0%{transform:scale(0);opacity:1;}
		100%{transform:scale(10);opacity:0.0}
	}
</style>
</head>

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

chenglidian · 发表于 2015-2-4 16:32:18

baihe107 发表于 2015-2-4 10:12
火狐浏览器一向对 CSS 语法执行的比较严格，一个是缩写的顺序不能错，一个是单位不能省的别省。 animation- ...

谢谢你的提醒和帮助，确实有好多写法没弄好。

帐号		自动登录	找回密码
密码			注册

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