CSS-transition、transform、animation之间的区别

transition 过渡:一个元素在不同状态之间切换时定义不同的过渡效果

属性值:transition-property transition-duration transition-timing-function transition-delay 属性名称 持续时间 速度曲线 何时开始

实例代码: transition: margin-right 4s ease-in-out 1s;

多种效果,以逗号分隔

实例代码: transition: margin-right 4s, color 2s;

  • transition-property:指定哪个或哪些属性用于过渡 也可用none/all表示没有过渡动画/所有可被动画的属性都表现过渡动画

  • transition-duration:指定过渡的时长,不接收负值

  • transition-timing-function:指定一个函数,定义属性值怎么变化

  • ease

  • ease-in

  • ease-out

  • ease-in-out

  • cubic-bezier(1,1,1,1)

  • linear

  • step-start

  • step-end

  • steps(4, end)

  • jump-start | jump-end | jump-none | jump-both | start | end

  • transition-delay:规定在过渡效果开始之前需要等待的时间s/ms

小球移动实例代码

transform 变换:旋转、缩放、倾斜、平移等操作 !只能转换盒模型的

属性值:matrix() translate() scale() rotate() skew()

实例代码

rotate(19deg) 正角表示顺时针旋转,负角表示逆时针旋转

scale() 增大/减小元素的大小

skew() 用于拉伸/平移

translate() 移动

animation 动画:用来指定一组或多组动画

属性值: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state

animation-name 设置动画的名称

animation-duration 设置动画完成的周期

animation-delay 设置动画什么时候开始

animation-timing-function:linear | ease | ease-in | ease-out | ease-in-out |step-start | step-end | steps(, []?) 设置动画的速度曲线

animation-iteration-count:infinite | 设置动画播放的次数

animation-direction:normal | reverse | alternate | alternate-reverse 规定下一个周期是否逆向播放

每个循环内动画向前循环,即结束后重置到起点重新开始

反向运行,由尾到头

交替反向运行

反向交替,反向开始交替

animation-fill-mode:none | forwards | backwards | both 动画停了之后位置什么状态

animation-play-state:running | paused 动画是否正在进行或暂停

@keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } } @keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; } }

三者的区别点:

transition是过渡,强调样式值得变化过程,只有开始和结束;需要通过hover或js等事件来配合触发;只能触发一次

animation也叫关键帧,通过@keyframe结合可以设置中间帧得一个状态;且可以不触发事件就触发过程;可触发多次

transform是转换,指的是改变元素得外观,没有动画效果,唰的一下就改变了

你可能感兴趣的:(CSS-transition、transform、animation之间的区别)