h5+c3-day-2

day-2

2d转换缩放

transform: scale( x, y )

xy后不用跟单位

只写一个值，xy值一致

值前面带小数点即是缩小

优势：可以设置缩放点，不影响其他盒子

2d转换综合写法

transform：translate() rotate() scale()

顺序会影响转换效果

3d效果动画

@keyframs 名字 {
百分比等于占用的时间量    0% {
        transform:translate()
    }
    50% {
        transform:translaate()
    }
}

动画属性

@keyframs 规定动画

animation 动画简写

··· -name 动画名字

• 持续时间：animation-duration
• 速度曲线：animation-timing-function
• 延迟时间：animation-delay
• 循环次数：animation-iteration-count
  • 无限次：infinite
• 方向：animation-direction
  • 正常：normal
  • 反复/来来回会：alternate
• 播放状态：animation-paly-state
  • 运行：running
  • 暂停：paused
• 结束状态：animation-fill-mode
  • 回来：backwords
  • 保持结束的状态：forwords

播放状态要放在hover后面

animation的简写

• 语法：animation: 名称 持续时间 速度曲线 延迟时间 循环次数 方向 结束状态;
• 这个简写各个配置项是有顺序的
• 这个简写不包含播放状态animation-play-state属性

运动曲线细节

linear 匀速

ease 低速开始，然后加快，结束变慢；（默认）

-in

-ont

-in-ont

steps(数字/) 分为几次显示；

animation可以使用多个，要用逗号隔开；