过渡动画与变形

过渡与动画

过渡

transition属性设置过渡

transition-duration:制定过渡效果的持续时间，单位s/ms

transition-timeing-function：过渡的时序函数，可选值：

ease 默认值，慢速开始，先加速，在减速

linear 匀速，ease-in 加速运动 ，ease-out减速运动

ease-in-out 先加速 后减速

cubic-bezier（）指定时序函数 （百度函数）

steps（x，start/end）分步执行过渡

transition-delay：过渡效果的延迟，等待一段时间后在执行

ps：transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间第一个必须是持续时间

动画@keyframes

animation属性设置动画，动画和过度类似，都是可以实现的一些动态的效果，不同的是，过渡需要某个属性发生变化时才会出发，动画可以自动触发动态效果，设置动画，必须先要设置一个关键帧

animation-duration：动画执行时间

animation-delay：动画的延时

animation-timing-function：ease-in-out；时序函数

animation-iteration-count ：动画执行次数：可选值：次数/infinite无限执行

animation-direction 指定动画运行方向：可选值：

normal，默认值，从from向to运行

reverse 从to向from运行，每次都是这样

alternate从from向to运行，重复执行时反向执行

alternate-reverse 从to向from运行 重复执行时动画反向执行

alimation-play-state：paused控制动画运行状态

alimation-fill-mode：动画的填充样式

可选值：none 默认值，动画执行完毕元素回到原来位置

forwards 动画执行完毕会停止在动画结束的位置

backwards 动画延时等待时，元素就会处于开始位置

both 结合了上述两个

变形

使用transform属性可以使元素变形，设置transformX/Y/Z，使元素在三个坐标轴方向上移动

应用一：使不确定大小的元素实现水平居中

设置left top 50%，在设置transfrom：x，y （-50%）可以实现元素水平居中

应用二：设置Y方向的平移变形实现动画效果

设置伪类事件，鼠标移入，使元素y方向偏移，配合阴影实现动画效果

应用三：设置Z方向的视距效果

要想实现z方向的可见效果，必须设置视距perspective：800px；并且要在没有进行旋转的情况下可以完成