第二天：css3-2D转换及动画

第二天：css3-2D转换

01-2D转换–旋转rotate

• 2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转

• 语法

  • transfrom:rotate(度数)

• 重点

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

02-2D转换–旋转中心点设置 transfrom-origin

• 设置元素旋转的中心点

• 语法

  • transfrom-origin: x y;

• 重点

  • 主要后面的参数x和 y用空格隔开
  • x y 默认转换的中心点是元素的中心点（50% 50%）
  • 可以给x y 设置 像素、百分比 或者方位名词（top botton left right center）

03-2D转换–缩放 scale

• 缩放，顾名思义，可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小

• 语法

  • transform:scale（宽的倍数,高的倍数）;
  • transform:scale（倍数）;

• 重点

  • 图片的缩放不影响其他元素的位置
  • 倍数大于1是放大，倍数小于1且小于-1是缩小
  • 如果倍数为负数为反向放大，很少用负数容易让人产生误解

04-动画animation

• 动画可以设置变化的次数，甚至是无数次

• 步骤

  1. 在css中定义动画函数
  2. 给目标元素调用动画函数

• 代码

	/* 1 声明动画函数 */
    @keyframes ani_div {
      0%{
        width: 100px;
        background-color: red;
      }
      50%{
        width: 150px;
        background-color: green;
      }
      100%{
        width: 300px;
        height: 300px;
        background-color: yellow;
      }
    }

    div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin: 100px auto;
      /* 2 调用动画 */
      animation-name: ani_div;
      /* 持续时间 */
      animation-duration: 2s;
    }

• 动画属性

1. 动画名

   设置要使用的动画名 animation-name:xxx;

2. 持续时间

   设置动画播放的持续时间 animation-duration:3s

3. 速度曲线

   和设置过渡的速度曲线一样 animation-timing-function:linear;

   • linear： 匀速
   • ease： 慢-快-慢 默认值
   • ease-in： 慢-快。
   • ease-out： 快-慢。
   • ease-in-out： 慢-快-慢。
   • steps: 步长

4. 延迟时间

   animation-delay: 0s;

5. 循环次数

   设置动画播放的循环次数 animation-iteration-count: 2; infinite 为无限循环

6. 循环方向

   animation-direction

   如在动画中定义了 0%：红色 100%：黑色 那么 当属性值为

   1. normal 默认值 红 -> 黑
   2. reverse 反向运行 黑 -> 红
   3. alternate 正-反-正… 红 -> 黑 -> 红…
   4. alternate-reverse 反-正-反… 黑 -> 红 -> 黑 …
   5. 以上与循环次数有关

7. 动画等待或者结束的状态

   animation-fill-mode 设置动画在等待或者结束的时候的状态

   • forwards：动画结束后，元素样式停留在 100% 的样式
   • backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式
   • both： 同时设置了 forwards和backwards两个属性值

8. 暂停和播放

   animation-play-state 控制 播放 还是 暂停

   running 播放 paused 暂停

• 动画的复合写法

animation: name duration timing-function delay iteration-count direction fill-mode;

• 多个动画写法

  • 用逗号分隔

animation: name duration timing-function delay iteration-count direction fill-mode，
animation: name duration timing-function delay iteration-count direction fill-mode;