CSS 2D旋转与缩放 动画

2D旋转与缩放 transform

---

移动transform： translate（Xpx，Ypx）；

1. 专门设置X轴translateX（）；
2. 专门设置Y轴translateY（）；
3. 最大的优点是：不会影响其他的元素的位置
4. translate中的百分比单位是相对自身元素的

旋转 transform： rotate（度数deg）；

1. rotate里面跟度数，单位是deg，比如rotate（45deg）
2. 角度正值时，顺时针旋转。负值，逆时针。
3. 默认旋转中心点是元素的终点。

旋转的中心点 transform-origin:X Y；

1. 注意后面参数X和Y用空格隔开
2. x y 默认转换的中心是元素的中心（50% 50%）
3. 还可以给X Y设置方位名词（top bottom center left right）

缩放效果 transform： scale（X,Y）；

1. 注意用逗号隔开
2. transform：scale（2）；高和宽都放大2倍
3. transform：scale（0.5,0.8）高缩小0.5，宽缩小0.8
4. 最大的优点是：默认是用中心点缩放，不会影响其他的元素的位置。

2D综合写法

• transform：translate（） rotate（） scale（）…等
• 要把位移放到做到最前面

动画（animation）

动画是css3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来设置复杂的动画效果。

相比较过度，动画可以实现更多变化，更多控制，连续自动播放等效果

1.动画的基本使用

制作分两步：1。先定义动画 2.再使用（调用）动画

用keyframes定义动画（类似定义选择器）

<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>

动画的基本属性

• @keyframes 声明动画

• animation-name 动画名字

• animation-duration 属性定义需要多长时间才能完成动画

• animation-delay 属性规定动画开始的延迟时间。

• animation-iteration-count 属性指定动画应运行的次数 "infinite"是无限运行

• animation-direction

  • animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

    animation-direction 属性可接受以下值：

  • normal - 动画正常播放（向前）。默认值

  • reverse - 动画以反方向播放（向后）

  • alternate - 动画先向前播放，然后向后

  • alternate-reverse - 动画先向后播放，然后向前

• animation-timing-function

• 指定动画的速度曲线

  animation-timing-function 属性规定动画的速度曲线。

  animation-timing-function 属性可接受以下值：

  • ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
  • linear - 规定从开始到结束的速度相同的动画
  • ease-in - 规定慢速开始的动画
  • ease-out - 规定慢速结束的动画
  • ease-in-out - 指定开始和结束较慢的动画
  • cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

• animation-fill-mode

• animation