Transform/Transition/Animation的区别与联系
博客专区 > Iuranus 的博客 > 博客详情
Transform/Transition/Animation的区别与联系
Iuranus 发表于2年前
Transform/Transition/Animation的区别与联系
  • 发表于 2年前
  • 阅读 457
  • 收藏 2
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

摘要: 囫囵地从一些HTML5动效实现源码去学习CSS3,Transform/Transition/Animation究竟是怎么搭配怎么不累的总是很模糊,是该整理下了。这次是从表象的理解上进行阐述,未涉及太多的参数、书写规则甚至数学物理学原理。

Transform,变形:

    首先,它的作用是变形,它是静态的!它是静态的!它是静态的!重要的话说三遍!它就像普通的CSS width/height/color属性一样,让元素展现不同的style,一旦元素被施上transform属性,就直接显示效果只不过它能让元素的style更modern而已。它包括旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix等功能,当然这些变形分2D跟3D。

    既然是变形,总要基于一个基准坐标位置进行变换,2D有X-Y轴坐标,3D是X-Y-Z坐标,至于具体按照这些坐标上的那个空间点进行变化,则需要依赖transform-origin,它将作用在需要变形的Html元素上,告诉元素如果你要变化了,该围绕着那个基准点进行扭动,不然会摔得很惨。

    参考:w3cplus CSS 2Dw3cplus CSS 3Dw3school CSS 2Dw3school CSS 3D


Transition,过渡:

    首先,它的作用是过渡,是给上述的变形加上时间概念,让它在一段特定的时间里按照特定的速度进行变化(可以指定过渡依赖属性transition-property、过渡时间transition-duration、过渡速率transition-timing-function、过渡时间延迟transition-delay条件)。

    而且它的强大正是可以让元素按照上述条件进行个性化例如某个元素的style将从黄色bgcolor变为蓝色bgcolor,并且通过margin-left右移100px。那么指定transition-propertry为background-color后,背景颜色的改变将按照transition指定的时间(假设为2s)、速率(假设为linear匀速)跟延迟(假设0s不延迟)进行,而右移则是一下子完成。因此当元素style被改变时,你将看到元素一下子向右位移100px,而背景颜色会在2s内从黄色匀速渐变为蓝色。反之如果transition设置在margin-left上,那么颜色是一下子变成蓝色,元素位置则会在2s内匀速移到右边100px处。

    其实费这么大力气用文字解释这个,是为了先知道然。至于所以然,不就是一堆transition参数嘛。


Animation,动画:

    还是首先,它是动画,从效果上可以“肤浅”地认为它是TransitionTransform(或者普通CSS属性)的组合。龙生九子(什么鬼?),但毕竟有所不同:Animation可以通过keyframe显式控制当前帧的属性,什么时候干什么完全能说了算,比Transition更灵活;Transition在过渡之后会改变元素的属性(当然不能完全怪它,它只是让元素“这么着”地从原始属性变为目标属性),而Animation只是模拟元素的属性改变并在一定时间内按照一定速率(这些跟Transition类似)来PLAY动画,动画结束了元素原本长啥样就显示啥样,它拍拍屁股走人,LIKE A PLAYBOY。它们的目的都是让元素能够动起来,至于怎么个手法,它们确实是在如何改变属性值这方面各有千秋。参考:w3cplus CSS3 Animation

先这样吧,饭后再说。


  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 11
博文 41
码字总数 22439
×
Iuranus
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: