<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秒的过滤怎么就没有?
既然是过渡,就应该有一个状态的变化,题主这样设置就是让
.a
的初始状态就为1.1倍。如果你给
.a:hover
设置样式就可以看到效果了:题主如果是想要一加载就开始动画的话,应该使用
animation
来实现。我猜题主想要的可能是这种效果?
不过这个应该算动画不算过渡吧www
W3C标准中对css3的transition这是样描述的:
“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”
所以并不是什么时候都能看到动画效果的,在页面刚加载 解析css 渲染页面的时候 并没有触发过渡效果。
如果想实现页面刚加载就出发 transition 的效果的话,可以考虑 用一下 调用一次 animation;或者 用js 获取页面加载状态;
仅供参考...