▊ 什么是转换(transform)?
转换可以理解为变形,可以实现元素的移动(translate)、旋转(rotate)、缩放(scale)等效果
▍ 移动(translate)
transform: translate(x,y); /*总写*/
transform: translateX(n);
transform: translateY(n); /*分开写也行*/
- 作用:改变元素在页面中的位置,类似定位
- translate最大的优点:不会影响其他元素的位置
- 百分比写法是自身元素的百分比:
translate:(50%, 50%);
- 对行内标签无效
▍旋转(rotate)
transform: rotate(度数);
- 度数的单位是deg(度)
- 正值表示顺时针,负值表示逆时针
- 默认旋转中心是元素的中心点
▍缩放(scale)
transform: scale(x, y);
- x和y用逗号隔开而不是空格
transform: scale(0.5);
等价于transform: scale(0.5, 0.5);
- scale缩放的最大优势:不影响其他元素;可以设置中心点
▍变换中心(transform-origin)
tansform-origin: x y; /* 2D转换中心点 */
- x和y参数之间用空格隔开
- 默认中心点当然是(50% 50%)
- x和y也可以是方位名词:
top bottom left right center
▍综合性写法(连写)
transform: translate() rolate() scale()...
- 空格隔开
- 其顺序会影响转换的效果。比如先旋转会改变坐标轴方向
- 当同时有位移(translate)和其他属性的时候,记得将位移放在最前面
▊ 什么是动画(animation)?
可通过多个节点来精确控制一个或一组动画,相较于过渡,变化效果更多
▍基本使用
- 用keyframe(关键帧)定义动画(
@keyframes
+名字+自定义动序列) - 调用动画(
animation-name
+animation-duration
,即名字+持续时间)(必须写的属性)
另: 关于动画序列,from/to
等价于 0% / 100%
▍动画属性
animation-timing-function |
动画的速度曲线 | ease (默认),linear … |
animation-delay |
动画延迟多少后开始 | 0 (默认) |
animation-iteration-count |
动画播放次数 | 1 (默认),infinite (无限)… |
animation-direction |
动画下一周期是否反方向 | normal (默认),alternate (逆播放)… |
animation-fill-mode |
动画结束后的状态 | backwards (默认跳回原处),forwards (保持位置)… |
animation-play-state |
动画的运行or暂停 | running (默认),paused … |
连写:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 结束的状态
( animation-play-state
不在连写之中)
即:animation: name duration timing-function delay iteration-count direction fill-mode;
▍补充知识——关于速度曲线
上面提到过 animation-timing-function
的默认值是ease
,还可以取linear
;其实还有:
ease |
加快,在结束前变慢 |
ease-in |
动画以低速开始,加快 |
ease-out |
动画以低速结束,减慢 |
ease-in-out |
开始和结束低速,中间快 |
steps() |
指定了时间函数中的间隔数量(步长) |
steps()
就是分几步完成动画;有了steps就不要再写ease和linear了
▊ 一个案例
/* 基本思路是: */
/* 1.精灵图当做一个div盒子的背景,精灵图的background-position分步进行移动————hana的贴图摇动 */
/* 2.div设置为绝对定位(由于没有有定位的祖先,因此以浏览器为基准),利用left做一个动画————hana的移动 */
div {
position: absolute;
width: 200px;
height: 200px;
background: url(hana.png) no-repeat;
/* 元素可以添加多个动画,用逗号隔开 */
animation: hana 1.5s steps(7) infinite, move 4s forwards;
/* infinite用于让hana一直摇动;forward让hana走到中间后保持位置 */
}
@keyframes hana {
0% {
background-position: 0 0;
}
100% {
background-position: -1400px 0;
/* 注意给background-position负值 */
}
}
@keyframes move {
0% {
left: -200px;
}
100% {
left: 50%;
transform: translateX(-50%);
/* 这样就行居中的修正,省去了计算 */
}
}
☀ 注
文章案例改编自《黑马程序员-web前端》
&Lolisaikou