7月13号：2D的转换和过渡，动画效果设置

一、2D的转换通过transform来实现，它有4种方式：

• 位移：translate（x坐标，y坐标），它是以左上角为原点的位移，不影响其他元素
• 缩放：scale（X倍数，Y倍数），它是以元素中心为原点进行缩放
• 旋转：rotate（度数），它是以元素中心为原点进行旋转
• 斜切（扭曲）：skew（X度数，Y度数）:X和Y方向同时进行扭曲拉缩

二、过渡是通过transition来实现，它可以同时对元素的多个属性同事定义过渡效果（对象，时间，类型，延迟时间）。

　　过渡的类型主要有以下几种方式

• linear：线性过渡
• ease：平滑过渡
• ease-in：由慢到快
• ease-out：由快到慢
• ease-in-out：由慢到快再到慢　

三、动画效果：通过animation来设置

　　　　

@keyframes myfirst {　　　　
　　0% {
　　width: 150px;
}

　　30% {
　　width: 300px;　　　　　　//动画从0%到100%进程时的效果设置
}

　　50% {
　　width: 500px;
}

　　100% {
　　width: 600px;
}
}

.div1 {
　　width: 150px;
　　height: 150px;
　　background-color: #21bbca;
　　-moz-animation: myfirst 4s ease infinite;//对元素myfirst进行一个持续时间为4S，过渡效果为平滑过渡，无限循环的动画效果
}

转载于:https://www.cnblogs.com/f19huangtao/p/4646986.html