Css3新特性应用之过渡与动画

发布时间：2017-01-09 12:00:11

目录背景与边框第一部分背景与边框第二部分形状视觉效果字体排印用户体验结构与布局过渡与动画源码下载一、缓动效果学习和利用贝塞尔曲线，默认支持ease，ease-in，ease-out,ease-in-out和linear等还提供一个cubic-beizer自定义贝塞尔曲线的起点和终 ...

一、缓动效果

学习和利用贝塞尔曲线，默认支持ease，ease-in，ease-out,ease-in-out和linear等
还提供一个cubic-beizer自定义贝塞尔曲线的起点和终点
Css中只支持一条贝塞尔曲的运动，不能连续多段
对cubic-beizer中控制锚点的水平坐标与垂直坐标互换，就可以得到任何调整函数的反向版本 cubic-beizer(.1,.25,1,.25)是ease的反向调整函数
- 水平坐标只能在0~1的范围内，因为水平坐标表示的是时间
- 垂直坐标可以超过此范围，表示为运动距离
示例代码

<head>  <meta charset="UTF-8">  <title>Document</title>  <style>    @keyframes bounce{      60%, 80%, to{        transform: translateY(350px);        animation-timing-function: ease-out; /*加速*/      }      70%{ transform: translateY(250px); }      90%{ transform: translateY(300px) }    }    .ball{      display: inline-block;      animation: bounce 3s ease-in; /*减速*/      width: 20px;      height: 20px;      border-radius: 50%;      background: red;    }    @keyframes bounceEase{      60%, 80%, to{        transform: translateY(400px);        animation-timing-function: ease;      }      70% { transform: translateY(300); }      90% { transform: translateY(350px); }    }    .ball02{      display: inline-block;      animation: bounceEase 3s cubic-bezier(.1,.25,1,.25);/*反向ease*/      margin-left: 60px;      width: 20px;      height: 20px;      border-radius: 50%;      background: gray;    }  </style></head><body>  <div class="ball">  </div>  <div class="ball02"></div></body>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com