H5 C3第二天

c3第二天

2d转换中心

transform-origin（50% 50%）;

取值可以为百分比 、方位名词、像素px

当为百分比时时相对于自身的 当只取一个值时，第二个值默认为50%

2d缩放 scale

scale (宽的倍数，高的倍数);

当里面的值大于1时 是放大 小于1时 缩小 负数时 方向放大

等比缩放可写一个值 不影响其他的元素 可以改变中心点

动画 animation

动画与过度的区别：动画可以设置变化的次数，甚至时无数次 动画可以自动播放 不需要鼠标经过

1.先定义动画

@keyframes  动画名字 {
    动画开始的样式
 form  / 0% {    
        css代码
    }
    动画完成的样式
 to   / 100%{
        css代码
    }
}

2.调用动画

在目标元素中调用

调用动画名
animation-name:动画名；
定义动画的持续时间
animation-duration:2s;

3.动画语句

animation-name 动画名

animation-duration 动画持续时间

animation-timing-function 速度曲线

• linear 匀速
• ease 慢-快-慢 默认值
• ease-in 慢-快
• ease-out 快-慢
• ease-in-out 慢-快-慢
• steps（） 指定时间函数的间隔数量（步长）
  1. steps( ,start/end)
  2. end 默认 把动画分成几步来完成
  3. start 开始第一步之前的起始位置在开始样式时

animation-delay 延迟时间

animation-iteration-count 循环次数

• infinite 无限循环

animation-direcyion 循环方向

• normal 默认值
• alternate 反复 ，来来回回
• reverse 反向运动

animation-fill-mode 动画等待或者结束的状态

• forwards 动画结束后，元素样式停留在100%的样式
• backwards 默认 回到0%的样式

animation-play-state 暂停和播放

• runnig 播放
• paused 暂停

动画语句的综合写法

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

​ 动画名字 持续时间 速度曲线 延迟时间 循环次数 循环反向 动画等待或结束时的状态

持续时间和延迟时间顺序不能反，动画名称和持续时间不能省略

animation-play-state 不写在综合写法中，一般与鼠标经过的:hover 一起使用

调用多个动画时，中间用逗号隔开写

animation: name duration,
 name duration ;