css3 transform transition相关问题
高洛峰
高洛峰 2017-04-17 11:17:21
0
3
635
<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秒的过滤怎么就没有?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

répondre à tous(3)
Ty80

既然是过渡,就应该有一个状态的变化,题主这样设置就是让.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来实现。

伊谢尔伦

我猜题主想要的可能是这种效果?
不过这个应该算动画不算过渡吧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> 
阿神

W3C标准中对css3的transition这是样描述的:
“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”
所以并不是什么时候都能看到动画效果的,在页面刚加载 解析css 渲染页面的时候 并没有触发过渡效果。
如果想实现页面刚加载就出发 transition 的效果的话,可以考虑 用一下 调用一次 animation;或者 用js 获取页面加载状态;

仅供参考...

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal