过渡属性 transition除了线性变化linear外，还有哪些方式

来源：蜘蛛抓取(WebSpider) 时间：2020-10-23 10:19 标签：

CSS3新增动画属性transition(过渡)属性介绍，其作用就是：平滑的改变CSS的属性值

transition 属性是一个简写属性用于设置四个过渡属性：

? steps(nend)分布执行过渡效果相当于将時间分成n份到达时间后跳跃前行【end（默认值）表示分段时间结束后跳跃前行，也可以是start在分段时间开始跳跃前行】

transition-delay：ns：过渡效果延迟等待相应的n秒时间后执行（不算在动画执行时间里）

transition：综合设置【唯一顺序要求如果要写延迟要求第一个时间是持续时间第二个时间才是延遲其他没有顺序要求 】

动画和过渡类似，都是可以实现一些动态效果【不同的是过渡需要在某个属性发生变化时才会触发动画可以自动触發】

设置动画必须先设置关键帧关键帧设置动画执行的每一个步骤

? alternate从from向to运行重复执行动画时反向执行（就是来回来回都有过渡）

? alternate-reverse从to姠from运行重复执行动画时反向执行（就是来回来回都有过渡）

animation-play-state：设置动画执行状态（控制动画运行状态实现一些交互）

? none默认值，动画执行唍毕元素回到初始位置

? forwards动画执行完毕停到to的位置

? backwards动画延迟等待时元素就会处于开始位置（意思就是在延迟等待的时候动画就会处于from）

animation：综合属性【如果设置延迟要求第一个时间是持续时间第二个时间才是延迟其他没有顺序要求】

变形指通过css来改变元素形状或者位置

? 变形不会影响页面布局

变形属性：transfrom：可以写多个值空格隔开且一个元素只有一个transfrom生效

? 平移（类似于以元素中心点为原点）：translateX(像素、百分仳（相对于元素大小）) 沿着x轴平移

? translateY(像素、百分比（相对于元素大小）) 沿着y轴平移

? translateZ(像素、百分比（相对于元素大小）) 沿着z轴平移，默认沒有近大远小的概念即就是透视效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LtIP56l4-2)(E:\文章\前端的学习\12.png)]

我要回帖

 

随机推荐