过渡
可选值
1、可以写多个css属性值,逗号隔开即开
2、如果不写或过度属性写错了,默认所有属性都发生过渡
/* transition-property: all; */
/* 过渡的时间 ms/s 必
/* transition-duration: 3s; */
/* 过渡变化曲线 选写*/
/* transition-timing-function: ease; */
/* 过渡的延迟 选写 默认是0s*/
/* transition-delay: 2s; */
/* 过渡的简写,过渡的时间是必写的,其他都有默认值 */
/* transition: all ease 2s 0s; */
动画
动画和过渡类似,都是可以实现⼀些动态效果,不同的是过渡需要在某个属性发⽣变化时才能触发,例如hover,acitve时,动画可以⾃动触发动画
第⼀步:先要设置⼀个关键帧,关键帧设置了动画每⼀个步骤
制定关键帧⽤的是@keyframes属性,指定关键帧主要有两种⽅法:
⽅法⼀:
@keyframes 关键帧名称{
from{初始状态属性}
to{结束状态属性}}
⽅法⼆:
@keyframes 关键帧名称{
0%{初始状态属性}
50%(中间还可以再添加关键帧)
100%{结束状态属性}
注意:
1、帧的顺序可以更改,不关顺序问题。如果初始帧不写,默认是原始设置,如果结束帧不写, 默认也是原始设置
2、可以同时设置关键帧,⽤逗号(
,)隔开就⾏
调用
1 animation-name绑定到选择器的关键帧的名称,告诉系统需要执⾏哪个动画(必填)设置动画的名@keyframs相对应,可以设置多个动画,逗号隔开,应⽤多个动画 2 animation-duration动画的完成时间,告诉系统动画持续的时长 (必填) 时间单位:s ms 3 animation-timingfunction设置动画如何完成一个周期,告诉系统动画执行的速度(与过度动画类型) * ease [i:z] 默认值,慢速开始,先加速,然后再减速 *linear 匀速运动 ease-in 先慢后快加速运动 ease-out 先快后慢减速运动 ease-in-out 以慢速开 始和结束的过渡效果 *steps()分布执⾏过渡 效果cubic-bezier(n,n,n,n) ⽴⽅⻉塞尔曲线函数, 值是0-1之间的数值 4 animation-delay 动画在启动前的延迟间隔 5 animation-iterationcount[,itə'reiʃən]动画的播放次数,告诉系统动画需要执行几n 定义画播放n次 nfinite无限次往返执行 6 animation-direction 指定是否应给轮流反向播放动画 normal 默认值: 从 from向to运⾏,每次都是 这样 reverse 从to到from运 ⾏,每次都是这样 * alternate 从from向to运 ⾏,重复执⾏动画时反向执 ⾏ alternate-reverse 从to 向from运⾏,重复执⾏动 画时反向执⾏ 7 animation-fill-mode规定当动画不播放时(完成时,延时未开始播放时),应用到的元素样式none默认值 动画执⾏完毕元素回到原来的位置 * forwards 动画执⾏完 毕,会停⽌在动画结束的位 置 backwards 动画延时等待 时,元素就会处于开始位置 both 结合了forwards和 ackwards的特点 8 animation-play-state 告诉系统当前动画是否 需要暂停 running 默认值 动画执 ⾏ paused 动画暂停 9 animation 简写,可以写以上任意 属性的可选值 animation:关键帧的名 称 动画持续的时间 运 动状态(linear(匀速)) 动 画延迟的时间 动画的循 环次数 动画的运动⽅式 (设置正向或者反向) |
变形
位移 transform: translate()
translate(参数1,参数2) 属性值1是指在x轴上移动的距离,正值,元素向右移动,负值向左移动,属性值2是指在y轴上移动的距离,正值向下,负值向上,参数2默认为0
translateX()沿着x轴⽅向平移
translateY()沿着y轴⽅向平移
translateZ()沿着z轴⽅向平移 结合视距起作⽤.不能是百分⽐数值(3d变化)
注意:
1、平移元素,可以是数字,可以是百分⽐,百分⽐是相对于⾃身计算的,x轴往右为正,y轴往下为正,反之
为负
2、位移的参考原点是元素的左上⻆
3、如果是通过active进⾏位移,执⾏完毕后会还原
4、 不会影响别的元素
5、对于⾏内元素是没有效果的
旋转 transform: rotate();
默认情况下是绕着中⼼点进⾏转动的;
默认的单位是deg,⽐如rotate(
45deg)
如果这个值为正值,则是元素对原点中⼼顺时针旋转;
可以单独对x轴y轴z轴进⾏设置:这⾥的X/Y/Z也是是需要⼤写的。
缩放transform:scale()
缩放属性是让元素根据中⼼原点对对象进⾏缩放。
倾斜transform:skew()
倾斜skew()是指通过设定的⻆度以其中⼼位置围绕着X轴和Y轴按照⼀定的⻆度倾斜显示