H5C3-day02-小结

01-2D转换之rotate

• 旋转

  • rotate(度数)
  • 单位：deg
  • 正顺，负逆
  • 默认的旋转中心点为元素的正中间

• CSS3 三角

  • 用rotate属性＋border属性实现

02-2D转换之中心点

• transform-origin:(x y);
• x为横坐标
• y为纵坐标
• 可以填方位名词，百分号，px
• 默认为50% 50%
• 只写一个值时，第二值为默认值50%

03-2D转换之scale

• 缩放
  • scale(x,y)
  • x为宽
  • y为高
  • 放大：大于1
  • 缩小：小于1
  • 只写一个值时，第二个值和第一个值相同

04-2D转换综合写法以及顺序

• transform:translaste rotate scale;
  • 一般把移动放在第一
  • 用空格隔开

05-CSS3动画的使用

• 1.定义动画

   @keyframes name {
        0%{
            
        }
        100%{
            
        }
      }
  

• 2.调用动画

  /*动画名称*/
  animation-name：
  /*持续时间*/
  animation-duration：
  

06-动画序列

• 0%是动画开始,100%是动画完成，0-100的规则即为动画序列

• from 和 to 等价于 0% 和 100%；

• 到达当前序列状态的时间 = 动画总持续时间 x 这个序列状态的百分比

07-CSS3动画常用属性

属性	方法	描述
@keyframes	必填	定义动画
animation	动画简写属性，除了play-state属性	动画简写
name	必填	名称
duration	必填	持续时间
timing-function	linear： 匀速 ease： 慢-快-慢 默认值 ease-in： 慢-快 ease-out： 快-慢 ease-in-out： 慢-快-慢 steps：步长	运动曲线
delay	延迟时间 s 或 ms	延长时间
iteration-count	infinite：无限	循环次数
direction	normal默认值 altemate返回	方向
fill-mode	backwords：停留在0% forwords：停留在100%	结束状态
play-state	running：播放 paused：暂停	鼠标移动时的状态

07-CSS3动画综合写法

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

08-运动曲线之steps步长

• stepss（步数，start/end）

• 按步数分开动画，每一步的到达时间 = 总持续时间 / 步数

09-奔跑的熊大案例