- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/CSS">
- *{
- margin: 0;
- padding: 0;
- }
- .container{
- width: 1000px;
- margin:0 auto;
- font-family: "黑体";
- }
- header{
- text-align: center;
- line-height: 60px;
- }
- section{
- width: 1000px;
- height: 120px;
- border:2px solid #ddd;
- float: left;
- margin:10px;
- border-radius: 10px;
- background: #fff;
- position: relative;
- }
- section h3{
- width: 1000px;
- height: 120px;
- text-align: center;
- line-height: 120px;
- color: blue;
- background: rgba(0,0,0,0.1);
- border-radius: 10px;
- display: none;
- position: absolute;
- top:0;
- left:0;
- }
- .container:hover h3{
- display: block;
- }
- .container:hover .content{
- left: 890px;
- }
- .content{
- width: 100px;
- height: 100px;
- border-radius: 10px;
- background-image: linear-gradient(pink,gray);
- position: relative;
- top:10px;
- left:10px;
- transition-property: left;
- transition-duration: 5s;
- }
- .item:nth-of-type(1) .content{
- /*匀速运动*/
- transition-timing-function: linear;
- }
- .item:nth-of-type(2) .content{
- /*慢->快->慢*/
- transition-timing-function: ease;
- }
- .item:nth-of-type(3) .content{
- /*慢->快 */
- transition-timing-function: ease-in;
- }
- .item:nth-of-type(4) .content{
- /*快->慢*/
- transition-timing-function: ease-out;
- }
- .item:nth-of-type(5) .content{
- /*慢->快->慢*/
- transition-timing-function: ease-in-out;
- }
- .item:nth-of-type(6) .content{
- /*慢->快->慢*/
- transition-timing-function: cubic-bezier(0.2,0.5,0.2,0.5);
- }
- </style>
- </head>
- <body>
- <div class="container">
- <header>
- <h2>过渡动画变化函数 transition-timing-function</h2>
- </header>
- <section class="item">
- <h3>匀速(线性)运动-linear</h3>
- <div class="content"></div>
- </section>
- <section class="item">
- <h3>慢->快->慢 : ease</h3>
- <div class="content"></div>
- </section>
- <section class="item">
- <h3>慢->快 : ease-in</h3>
- <div class="content"></div>
- </section>
- <section class="item">
- <h3>快->慢 : ease-out</h3>
- <div class="content"></div>
- </section>
- <section class="item">
- <h3>更慢->更快->更慢 : ease-in-out</h3>
- <div class="content"></div>
- </section>
- <section class="item">
- <h3>自定义 : cubic-bezier(n,n,n,n)</h3>
- <div class="content"></div>
- </section>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/notes/45493/db14e47d86dc1818cef12b85ab533494.html