CSS of transition&&animation&&transfrom

男娘i 2022-10-31 04:18 138阅读 0赞

**transition 状态过渡**

transition-property  监听哪个属性的状态改变，默认all

transition-duration 过渡时间

transition-timing-function 过渡状态  linear

transition-delay  等待执行时间

一般直接整合填写  （display属性不能被监测）

**cubic-bezier 贝塞尔曲线（运动状态）transition-timing-function的属性值**

cubic-bezier(x1,y1,x2,y2),x轴必须在0~1

**animation 动画**

transition只能实现一个状态改变的动画，animation可以多次改变状态,通过"，"可以指定多种动画

animation-dalay

animation-duration

animation-timing-function 通过cubic--bezier设置的函数设置的是每段状态的变化

steps()直接跳转

(1,end/start)一步到位 ===step-end/start

(2,end/start)每个状态跳两次

end:保留当前状态直到动画结束（差一步） 后面可填写forwards弥补下缺陷（补上一步）

start:保留下一个状态直到动画结束（类似抢跑）

animation-iteration-count 动画循环执行次数（默认1）:infinite(无限循环)

animation-direction:reverse（倒着走）/alternate(正着一次反着一次，前提：count=2+)/alternate-reverse 动画方向

animation-play-state:paused暂停/running运行 设置动画状态

animation-fill-mode:none/forwards(设置动画结束后的状态，一直以运动最后状态显示)/backwards(设置动画开始之前的状态)/both（设置开始之前和结束之后的状态）

@keyframe animation-name\{

0%/from\{\}

~（中间只能用百分数,每个阶段之间没有逗号）

100%.to\{\}

\}

使用: selector\{

animation : animation-name animation-duration animation-timing-function animation-dalay , animation-name2 animation-duration2 animation-timing-function2 animation-dalay2，。。。。

\}

**transform 变化（底层是通过矩阵计算）**

transform-origin 设置中心点

**rotate(deg度数) **        旋转  2D

元素旋转后，参照的轴也会转动

rotateX（deg）  沿着X轴旋转

rotateY（deg）  沿着Y轴旋转

rotateZ（deg）  沿着Z轴旋转

rotate3d（x,y,z,angle）沿着矢量值为轴旋转

**scale（x,y）** 小于1就缩小   伸缩变化2D

1.伸缩的是元素变化坐标轴的刻度（如果是(2,1)视觉上横向的100会变成200，实际还是100）

2.可叠加使用

3. 伸缩后会保留影响

scalex()

scaley()

scalez()

scale3d()  （三者之和）

**skew 倾斜**

skew(xdeg,ydeg)  2D变化   坐标轴倾斜，对后面平移等操作也有影响，同时刻度被拉伸。

**translate 平移 **       也会影响坐标轴

translatex()   自身不确定宽高，需要设置Left/top可以用left/top: 50%;translatex/y(-50%)

translatey()

translatez() 比较特别，配合prespective有投影效果

translate3d()

**prespective: none/1~正无穷  景深**

在父级加prespective: ~px ; （三D视角）

transform-style :preserve-3d  直接父级设置，子级保持3D空间

prespective-origin 视觉中心

可叠加

发表评论取消回复

表情：

评论列表（有 0 条评论，138人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS中的:first-child、nth-child()与nth-of-type()

今天运用到了first-child与nth-child()，发现怎么也用不对，重新查了下发现自己对这两个伪类的理解有错误，就重新开个帖子。 first-child ...

左手的ㄟ右手/ 2024年04月19日 07:07/ 0 赞/ 30 阅读

相关解决：Error: PostCSS received undefined instead of CSS string

前言 vue项目运行报错： -------------------- 错误如下 ERROR Failed to compile with 2 erro

深碍√TFBOYSˉ_/ 2022年12月28日 01:39/ 0 赞/ 150 阅读

相关 CSS3 of detail

细枝末节 1. 版本兼容 <table style="width:500px;"> <tbody> <tr>

墨蓝/ 2022年10月31日 04:19/ 0 赞/ 139 阅读

相关 CSS of transition&&animation&&transfrom

transition 状态过渡 transition-property 监听哪个属性的状态改变，默认all transition-duration 过渡时间 trans

男娘i/ 2022年10月31日 04:18/ 0 赞/ 139 阅读

相关 CSS3 of box

box 标准盒子：box-width=border2+padding2+width IE6混杂模式盒模型：box-width=width 所以content-width

待我称王封你为后i/ 2022年10月31日 04:18/ 0 赞/ 1 阅读

相关 CSS3 of background

Background相关 background-image:url()/渐变颜色(linear-gradient()线性渐变,radial-gradient径向渐变类似

ゝ一纸荒年。/ 2022年10月31日 04:18/ 0 赞/ 151 阅读

相关 CSS3 of Border

Border相关 calc（50% - 盒宽/高度一半）内部必须有空格，可用于计算并设置left,top值，就不用再设置margin-top/left border-

╰半橙微兮°/ 2022年10月31日 04:17/ 0 赞/ 132 阅读

相关 CSS选择器---nth-child&nth-of-type

nth-child :nth-child(number) 直接匹配第number个元素复制代码 :not(:first-child)

素颜马尾好姑娘i/ 2022年10月01日 11:45/ 0 赞/ 121 阅读

相关详解css3中的:nth-of-type(n)

该选择器，虽然之前用的也不少，但感觉理解的不是特别好，使用的时候效率太低，所以今天就总结一下，嗯 :nth-of-type() CSS 伪类匹配同类型中的第n个同级兄弟

曾经终败给现在/ 2022年05月23日 07:29/ 0 赞/ 194 阅读

相关 css选择器中:first-child与:first-of-type的区别

:first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码： 1 <div> 2 <p>第一个

「爱情、让人受尽委屈。」/ 2021年09月20日 07:26/ 0 赞/ 139 阅读