社群 學習 工具庫 休閒
搜尋
繁体中文
css3 transform transition相关问题
高洛峰
高洛峰 2017-04-17 11:17:21
0
3
649
<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教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

全部回覆(3)
Ty80
Ty802017-04-17 11:19:21 3樓

既然是過渡，就應該有一個狀態的變化，題主這樣設定就是讓.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來實現。

點贊 +0
新增回覆
伊谢尔伦
伊谢尔伦2017-04-17 11:19:21 2樓

我猜題主想要的可能是這種效果?
不過這個應該算動畫不算轉檔吧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>
點贊 +0
新增回覆
阿神
阿神2017-04-17 11:19:21 1樓

W3C標準中對css3的transition這是樣描述的：
「css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠點擊、獲得焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。 所以並不是什麼時候都能看到動畫效果的，在頁面剛載入 解析css 渲染頁面的時候 並沒有觸發過渡效果。
如果想實現頁面剛載入就出發 transition 的效果的話，可以考慮 用一下 用一下 呼叫一次 animation；或 用js 取得頁面載入狀態；

僅供參考...

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板