transform 2D转换，animation 动画

2D转换 transform

transform 是 CSS3 中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果

移动 translate

transform: translate(x, y); /* 或者分开写，单位px */
transform: translateX(n);
transform: translateY(n);

重点

• 定义2D转换中的移动，沿着X轴和Y轴移动元素；
• translate最大的有点：不会影响到其他元素的位置；
• translate中的半分比单位是相对于自身元素的translate:(50%, 50%);
• 对行内标签没有效果

旋转 rotate

transform: rotate(度数deg) /* 单位为 deg */

重点：

• rotate里面跟度数，单位是deg，比如rotate(45deg)
• 角度为正时，顺时针，负时，逆时针
• 默认旋转中心点是元素的中心点

转换中心点 transform-origin

transform-origin: x y;

重点：

• 注意后面的x和y使用空格隔开的
• x y默认转换的重点是元素的中心点（50% 50%）
• 还可以给 x y 设置像素或者方位名词 （top bottom left right center）

缩放 scale

transform: scale(x, y);

注意：

• 注意x和y是用逗号隔开
• transform:scale(1, 1); ：宽和高都放大一倍，相对于没有放大，依次类推
• transform:scale(2); ：宽和高都放大2倍，第二个默认与第一个一致
• transform:scale(0.5, 0.5); ：缩小
• scale缩放的最大优势，可以设置中心缩放点，默认以中心缩放，而且不影响其他盒子；

综合性写法

1. 同时使用多个转换，其格式为：transform: translate() rotate() scale()等
2. 其顺序会影响转换的效果，（先旋转会改变坐标轴）
3. 当我们同时有位移和其他属性的时候，要将位移放到前面

动画 animation

动画 animation 是CSS3中具有颠覆性的属性之一，可以设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果，相比较于过渡，动画可以实现更多变化，更多控制，连续自动播放等动画

动画基本使用

1，先定义动画

2，再调用动画

1，使用 keyframes 定义动画

/* 0%, 100% 也可使用 from, to */
@keyframes animationName{
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translate(200px, 200px);
  }
}

2，调用动画

div {
  width: 100px;
  height: 100px;
  background-color: pink;
  animation-name: animationName;
  animation-duration: 2s;
}

动画序列

• 0% 是动画的开始，100%是动画的完成，这样的规则就是动画序列
• 在 @keyframes 中规定某项 css 样式，就能创建由当前样式逐渐改为新样式的动画效果
• 动画是使元素从一种样式逐渐变换为另一种样式效果，可以改变任意多的次数和样式；
• 用百分比来规定变化发生的时间，或用关键词 from to，等同于 0% 100%

动画属性

动画简写属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态

animation: move 2s ease 0s infinte alternate backwards;

速度曲线

animation-timing-function: 规定动画的速度曲线，默认是 ease

transform 2D转换，animation 动画

原文：https://www.cnblogs.com/article-record/p/12444307.html