animation

动 画
平滑过渡动画必须触发鼠标事件（滑过、点击、访问过后）

transition 是用于完成平滑过渡的属性，要过渡的属性之间用逗号隔开 ，任何属性都可以参与过渡，只是过渡的属性默认为0s 所以每个属性后面要跟一个非0的时长
要过渡的属性可以用all来代替表示（表示支持所有属性） all也可以省略不写

时长的单位可以是s 也可以是ms 1000ms = 1s
transition:all 3s linear 1s ;
tranisiton中最多可以写4个参数（最少1个参数：transition:duration 时长），分别代表：
tranisition-property:all 表示要参与过渡的属性 all是默认值
tranisition-duration:3s 表示动画持续的时长和速度曲线 默认值0（时长决定速度）
tranisition-timing-function:linear 动画运动的方式类型
（ease：默认值 linear:匀速运动 ease-in:表示由慢到快 ease-out:表示由快到慢 ease-in-out:慢快慢）
tranisition-delay:1s 动画的延迟时间
IOS下safari渲染transition时出现闪屏问题，解决方法：
Backface-visibility:hidden;
display:none;的元素并不支持css3动画

动画第二课时
变形
transform 用于实现变形（形变位不变）IE8及以下不支持
元素本身的位置（大小、坐标）没有发生变化，并且不占位

transform:skew();
skew:用于完成倾斜（扭曲）
deg：表示度数，默认情况下表示x轴倾斜
x y 不区分大小写
skew(15deg,30deg)两个参数表示x y轴同时变形
skew不支持z轴。最多只能传两个参数

transform：rotate(45deg) 默认是Z轴
rotate：用于旋转,单位deg
transform：rotatex(45deg)沿x轴水平旋转
transform：rotateY（45deg）沿Y轴垂直旋转
transform：rotate3d(4个参数) rotate3d(1 1 1,30deg);
rotate3d后面必须指清旋转的3个方向

transform:scale:表示缩放
transform:scale(2)表示宽度和高度一起缩放
transform:scalex(2)=transform:scale(2,1):表示宽度为原来的2倍
transform:scaley(2)=transform:scale(1,2):表示高度为原来的2倍
transform:scale3d(2,2,2)如果有3d限定 必须传3个参数

transform:translate 表示位移
如果只有一个值，默认表示X轴位移
X轴：正值表示向右移动，负值表示向左移动
Y轴：正值表示向下移动，负值表示向上移动
transform:translatex(300px)表示元素向右移动300px
translatey(200px)==translate(0,200px)表示元素向下移动200px
translate3d()括号中必须有3个参数
transform:translateZ();近大远小
transform-style:preserve-3d;//开启3D透视
transform:perspective(100px);//透视距离

transform:
skew:倾斜 没有z轴，默认表示x轴
scale ：缩放 默认表示宽高一起变化 参数不能为0
rotate:旋转 如果有3d限定，前三个表示旋转的方向
translate:位移 默认x轴，最多3个参数，最少1个（正值表示向右或者向下移动，负值表示向左或者向上）

transform-origin;默认情况下是(center,center)

transform-origin控制元素变形的基准点，默认是center,center

---

animation：自执行 用于实现关键帧动画
@keyframes
animation:mydh 2s linear 2s （infinite） alter;

animation-name:mydh--第一个参数表示动画的名称（给元素绑定了一个mydh的动画效果）/none为默认值 当为none时不引用任何动画名称

animation-duration:2s--表示动画持续的时长和速度曲线,时长决定速度

animation-timing-function:linear---表示动画的类型方式--值（linear:匀速 ease-in:慢到快 ease-out:快到慢 ease-in-out:慢快慢 ease:表示默认）

animation-delay:动画的延迟时间

animation-iteration-count：具体数值;:动画执行的次数，infinite表示无限循环

animation-direction:；表示动画执行方向 alternate 表示正反交替（normal:表示正常状态） 反向：reverse

animation-fill-mode: 用于设置动画结束后的停留点（forwards:表示停留在最后一个点上 backwards:表示停留在第一个点上 默认值:none both:介于最后和开始之间）

关键帧动画必须由@keyframes来引出

@keyframes 动画名称(mydh){
执行代码块（0%==from 100%==to）[关键帧动画的单位必须是百分比]
}
关键帧动画可以设置不同时段的百分比效果

transition: 过渡平滑的动画 最多4个参数 最少1个（transition-duration）
animation: 关键帧 最长7个参数 最少2个

transition存在animation不存在的属性是：
transition-property

animation存在transition不存在：
animation-name 动画的名称
animation-iteration-count 动画执行的次数
animation-direction 表示正反交替

公共属性：
duration 表示动画持续的时长和速度曲线
timing-function 方式类型
delay 延迟

box-shadow
box-shadow：X Y 模糊半径 颜色
x y偏移量可以为正负值
word-break:break-all;强制文本换行

动画:
transition 4 1
animation 6 2 动画默认执行的时长默认是0，默认执行次数是1

---

transition: 过渡平滑的动画 最多4个参数 最少1个（all）
animation: 关键帧 最长7个参数 最少2个

transition存在animation不存在的属性是：
transition-property

animation存在transition不存在：
animation-name 动画的名称
animation-iteration-count 动画执行的次数
animation-direction 表示动画方向

公共属性：
duration 表示动画持续的时长和速度曲线
timing-function 方式类型
delay 延迟