CSS变形效果
Transform
translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移。
scale:缩放 大于1放大，小于1缩小。
rotate：旋转 单位 deg度 | grad 梯度 |rad 弧度 | turn 转、圈
transform-origin:变形中心点 transform-origin:0,0;
Transition:
transform-property： 属性|all
transform-duration： 持续时间
transform-timing-funciton：动画类型 linear|ease|ease-in|ease-in-out|step-start|
step-end|steps|cubic-bezier
transform-delay:延迟时间
CSS动画效果
@keyframes name{
from{ 位置 大小 颜色 透明度 transform }
50%{}
to{}
}
在要应用的样式上加入 animation: name 持续时间 动画类型 过渡方式
重复次数infinite 为无限次 是否有反向动画 alternate为有 forwards定位到最后位置
如：animation: fly1 3s linear infinite alternate forwards;