<style>
.a{
-webkit-transition: 1s 0s all ease;
-o-transition: 1s 0s all ease;
-moz-transition: 1s 0s all ease;
transition: 1s 0s all ease;
-webkit-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
</style>
<p class="a" style="height: 300px;width: 300px;background: red"></p>
就这样 为什么页面显示出来直接放大了1.1倍 1秒的过滤怎么就没有？
PHP中文网2017-04-17 11:19:21
既然是过渡，就应该有一个状态的变化，题主这样设置就是让.a的初始状态就为1.1倍。
如果你给.a:hover设置样式就可以看到效果了：
.a {
-webkit-transition: 1s 0s all ease;
-o-transition: 1s 0s all ease;
-moz-transition: 1s 0s all ease;
transition: 1s 0s all ease;
}
.a:hover {
-webkit-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
题主如果是想要一加载就开始动画的话，应该使用animation来实现。
伊谢尔伦2017-04-17 11:19:21
我猜题主想要的可能是这种效果?
不过这个应该算动画不算过渡吧www
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
@keyframes myfirst{
from {background: red;}
to {
background: yellow;
-webkit-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
}
@-moz-keyframes myfirst /* Firefox */{
from {background: red;}
to {background: yellow;
-webkit-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */{
from {background: red;}
to {background: yellow;
-webkit-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
}
@-o-keyframes myfirst /* Opera */{
from {background: red;}
to {background: yellow;
-webkit-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
}
.a{
width: 300px;
height: 300px;
background: red;
-webkit-animation: myfirst 1s;
-o-animation: myfirst 1s;
-moz-animation: myfirst 1s;
animation: myfirst 1s;
}
</style>
</head>
<body>
<p class="a"></p>
</body>
</html>
阿神2017-04-17 11:19:21
W3C标准中对css3的transition这是样描述的：
“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”
所以并不是什么时候都能看到动画效果的，在页面刚加载 解析css 渲染页面的时候 并没有触发过渡效果。
如果想实现页面刚加载就出发 transition 的效果的话，可以考虑 用一下 调用一次 animation；或者 用js 获取页面加载状态；
仅供参考...