search

Home  >  Q&A  >  body text

css3 transform transition相关问题

<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秒的过滤怎么就没有？

高洛峰高洛峰2782 days ago650

reply all(3)I'll reply

  • PHP中文网

    PHP中文网2017-04-17 11:19:21

    Since it is a transition , there should be a state change. The questioner sets it up like this so that the initial state of .a is 1.1 times.
    If you set the style for .a:hover you can see the effect: 

    .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);
}

    If you want to start animation as soon as it is loaded, you should use animation to achieve it.

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:19:21

    I guess this is what the questioner wants?
    But this should be considered animation and not transition 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>

    reply
    0
  • 阿神

    阿神2017-04-17 11:19:21

    The CSS3 transition is described in the W3C standard as follows:
    "The transition of CSS allows the property value of CSS to transition smoothly within a certain time interval. This effect can be triggered by mouse clicks, focus, being clicked, or any changes to the element, and smoothly changes the CSS properties with animation effects. attribute value.”
    So you can't see the animation effect at any time. When the page is just loaded, the CSS is parsed and the page is rendered, the transition effect is not triggered.
    If you want to achieve the effect of starting the transition as soon as the page is loaded, you can consider using to call the animation; or use js to get the page loading status;

    For reference only...

    reply
    0
  • Cancelreply