transition1

transition的简单例子

by Robbie Yang

HTML

<div class="container">
  <div class="balloon default ">default</div>
  <div class="balloon linear ">linear</div>
  <div class="balloon ease ">ease</div>
  <div class="balloon ease-in ">ease-in</div>
  <div class="balloon ease-out ">ease-out</div>
  <div class="balloon ease-in-out ">ease-in-out</div>
  <div class="balloon cubic-bezie ">cubic-bezie</div>
</div>

CSS

html,body,div {
    margin: 0;
    padding: 0;
  }
  .container {
    position: relative;
    width: 2000px;
    height: 2000px;
    background-color: rgb(192, 217, 223);
  }
  .balloon {
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 20px;
    top:0;
    text-align: center;
    line-height: 100px;
    border-radius: 100px;
    color: rgb(247, 133, 2);
    background-color: rgba(218, 165, 165, 0.5);
  }

  .container:hover .default{
    top: 300px;
    /** 过渡属性*/
    transition-property: top;
    /** 过渡时长*/
    transition-duration: 5s;
    /** 过渡方式*/
    /* transition-timing-function: ease; */
  }
  

  .container:hover .linear{
    top: 300px;
    /** 过渡属性*/
    transition-property: top;
    /** 过渡时长*/
    transition-duration: 5s;
    /** 过渡方式*/
    transition-timing-function: linear;
  }

  .container:hover .ease{
    top: 300px;
    /** 过渡属性*/
    transition-property: top;
    /** 过渡时长*/
    transition-duration: 5s;
    /** 过渡方式*/
    transition-timing-function: ease;
  }

  .container:hover .ease-in{
    top: 300px;
    /** 过渡属性*/
    transition-property: top;
    /** 过渡时长*/
    transition-duration: 5s;
    /** 过渡方式*/
    transition-timing-function: ease-in;
  }

  .container:hover .ease-out{
    top: 300px;
    /** 过渡属性*/
    transition-property: top;
    /** 过渡时长*/
    transition-duration: 5s;
    /** 过渡方式*/
    transition-timing-function: ease-out;
  }

  .container:hover .ease-in-out{
    top: 300px;
    /** 过渡属性*/
    transition-property: top;
    /** 过渡时长*/
    transition-duration: 5s;
    /** 过渡方式*/
    transition-timing-function: ease-in-out;
  }

  .container:hover .cubic-bezie{
    top: 300px;
    /** 过渡属性*/
    transition-property: top;
    /** 过渡时长*/
    transition-duration: 5s;
    /** 过渡方式*/
    transition-timing-function: cubic-bezie(0.59,-0.62,0.06,0.84);
  }