css animation属性

css animation属性

animation属性为多个属性混合的简写属性，可以为元素设置动画

过渡 transition
可以指定一个属性发生变化时的切换方式
通过过渡可以创建一些非常好的效果

transition-property:指定要执行过渡的属性 多个属性间使用逗号隔开
如果所有属性都需要过渡,使用all关键字,大部分属性都支持过渡（值能计算的）
过渡时必须是一个有效数值向另外一个有效值进行过渡
transition-duration:指定过渡效果的持续时间
transition-timing-function:过渡的时序函数
指定过渡的执行方式
ease默认值 慢速开始先加速再减速
linear匀速运动
ease-in 加速运动
ease-out减速运动
ease-in-out先加速后减速

cubic-bezier（）来指定时序函数
step（）分步执行过渡效果 可以设置一个第二个值
end默认值 在时间结束时执行过渡
start在时间开始时执行过渡
delay等待一段时间后在执行过渡
transition可以同时设置相关的所有属性 只有一个要求 如果要写延迟则两个实践中第一个是持续时间

动画和过渡类似 不同的是过渡需要在某个属性发生变化时才会触发
动画可以自动触发动态效果
设置动画效果 必须先要设置关键帧 关键帧设置了动画执行每一个步骤
@keyframes 名字 {
to{}动画结束位置
from{}动画开始位置
}
animation-name:要对当前元素生效的关键帧的名字
animation-duration 动画执行时间
animation-iteration-count 动画执行的次数 可选值 次数 infinite无限执行

animation-direction 动画执行的方向 默认normal从from向to运行 每次都是这样
reverse从to到from反方向运行
alternate从from到to运行 重复执行动画时反向执行
alternate-reverse从to到from运行 重复执行动画时反向执行
animation-play-state设置动画的执行状态
running默认值 动画执行
paused动画暂停
animation-fill-mode 动画的填充模式
none默认值 动画执行完毕回到原来位置forwards动画执行完毕停止在结束位置
backwards动画延时等待时 元素就会处于开始位置
both结合了两个的特点

变形就是指通过css来改变元素的形状或位置 变形不会影响到页面的布局
transform 用来设置元素变形效果
平移 translateX（）沿着x轴方向平移
translateY（）
translateZ（）
平移元素时百分比针对自身计算
z轴平移 调整元素和人眼之间的距离 距离越大 元素离人越近
z轴平移属于立体效果 近大远小默认情况下网页不支持透视
如果我们需要看见效果必须设置网页的视距perspective

旋转
通过旋转可以使元素沿着 x，y或z旋转指定的角度
rotateX（）
rotate（）
rotateZ（）

对元素进行缩放的函数
scaleX（）水平方向缩放
scaleY（）垂直方向缩放
scale（）双方向