CSS3学习: 变形、过渡、动画、关联属性浅析

原创 前端-DK 随笔 前端 55阅读 12 天前 举报

一、变形

transform:可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix。
示例:

transition:过度属性

transition:过度效果的css属性名 过度效果时长 速度效果的速度曲线 过度效果开始时间;

rotate():二维空间旋转元素。

若元素设置了perspective值,可用rotate3d()实现三维空间内旋转。

scale()

translate([,]):移动,是位移量。

skew():倾斜

matrix(a,c,e,b,d,f):矩阵变形,c、e的值用正弦或余弦值表示。

a:表示scaleX(); X轴缩放
c:skewY(); Y轴倾斜
e:skewX(); X轴倾斜
b:scaleY(); Y轴缩放
d:translateX() X轴移动
f:translateY() Y轴移动

perspective():透视

二、过渡

transition-property:过度的属性

transition-duration:过度时间
transition-delay:延迟时间,为负数时,过度动作会从该时间点开始显示,之前的动作会被截断。
transition-timing-function:过度效果,默认ease。

三、动画

animation-name:动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义,如果提供多个属性值用逗号隔开。

@keyframes相当于一个命名空间,后面跟一个名词,如果在class中的animation-name定义了与之对应的name就可以执行动画。定义动画时可直接使用关键字from和to,从一种状态过度到另一种状态。

animation-duration:动画时间

animation-timing-function:播放方式,取值如下:

ease:缓解效果,等同于cubic-bezier(0.25,0.1,0.25,1.0)函数,既立方贝塞尔。
linear:线性效果
ease-in:渐显效果
ease-out:渐隐效果
ease-in-out:渐显渐隐效果
step-start:马上跳转到动画结束状态
step-end:保持动画开始状态,到动画执行时间结束,马上跳转到动画结束状态
step([,[start | end]]?):第一个参数number为指定的间隔数,即把动画分为n步阶段性显示,第二个参数默认为end,设置最后一步状态,start为结束时的状态,end为开始时的状态,若设置与animation-fill-mode的效果冲突,以animation-fill-mode的设置为动画结束状态。
cubic-bezier(,,,):特殊的立方赛贝尔曲线效果

animation-delay:开始播放时间

animation-iteration-count:播放次数,取值为infinite时表示无限循环播放

animation-direction:播放方向,取值为:

normal:正常方向
reverse:动画反向运行,方向始终与normal相仿
alternate:动画会循环正反交替运动

animation-fill-mode:播放后的状态,取值:

none:默认值,不设置
forwards:结束后保持动画结束的状态
backwards:结束后返回动画开始时状态
both:结束后可遵循forwards和backwards两个规则
animation-play-state:检索或设置对象动画的状态,取值:
running:默认,运动
paused:暂停

四、关联属性

transform-origin:变形原点,transform的参照点,默认为元素的中心点。有两个参数,参数一为横坐标,参数二为纵坐标。

percentage:用百分比指定坐标值,可负
length:用长度指定坐标值,可负
left center right:水平方向取值
top center bottom:垂直方向取值

perspective-prigin:透视原点,定义在X轴和Y轴的3D元素,允许改变3D元素的底部位置,定义该属性时,它是一个元素的子元素,透视图,而不是元素本身。
注意:使用该属性必须和perspective属性一起用,只影响3D转换的元素。
取值:percentage、length、left、center、right、top、center、bottom

backface-visibility:隐藏内容的背面,默认情况下背面可见,反转后变换的内容仍然可见,当backface-visibility设置hidden时,旋转后内容将隐藏,旋转后正面将不再可见。
取值:visible、hidden
transform-style:3D呈现,设置内嵌的元素在3D空间如何呈现,有两个值:
flat:所有子元素在2D平面呈现
preserve-3d:保留3D空间

自己是一个五年的前端工程师

这里推荐一下我的前端学习交流群:784783012 ,里面都是学习前端的,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入。

点击:加入

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复