CSS3 新特性

参考

• 个人总结（css3新特性）
• cubic-bezier贝塞尔在线预览
• transition-timing-function | cssreference
• Understanding The CSS3 transition-timing-function Property
• 翻译 | 深入理解CSS时序函数
• css3动画详解【推荐】

⭐️ transition 过渡

// 语法
transition: CSS属性，花费时间，运动曲线(默认ease)，延迟时间(默认0)

// demo1
/*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/
transition: width, .5s, ease, .2s;

// demo2
分开写
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

⭐️ animation 动画

// 语法
animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），
是否反向播放动画（默认normal），是否暂停动画（默认running）

// demo1
/*执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear;

// demo2
/*2秒后开始执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear 2s;

// demo3
/*无限执行logo2-line动画，每次运动时间2秒，运动曲线为 linear，并且执行反向动画*/
animation: logo2-line 2s linear alternate infinite;

还有一个重要属性：用来指定在动画执行之前和之后如何给动画的目标应用样式。
animation-fill-mode: none | forwards | backwards | both;
/*
动画分为 初始状态 等待期 动画执行期 完成期 四个阶段。
none 表示 等待期和完成期，元素样式都为初始状态样式，不受动画定义（@keyframes）的影响
forwards 表示等待期保持初始样式，完成期间保持最后一帧样式
backwards 表示等待期为第一帧样式，完成期跳转为初始样式
both 表示 等待期样式为第一帧样式，完成期保持最后一帧样式
*/  

参考：<https://segmentfault.com/q/1010000003867335>

⭐️ transform 形状转换

transform: 适用于 2D 或 3D 转换的元素 (3d看这里)

transform-origin：转换元素的位置（围绕那个点进行转换,默认中心）。默认 x,y,z ： 50%,50%,0 对应 left, top

• 缩放 scale
• 位移 translate
• 旋转 rotate
• 倾斜 skew

transform: rotate(30deg);
transform: translate(30px, 30px);
transform: scale(.8);
transform: skew(10deg, 10deg);
transform-origin: left top; 左上（默认中心）【改变元素变形的原点】

deg(Degress度)