1. Transform转换(2d)
1.元素位移 参照点:左上角 transform:translate(x px,y px); 执行完毕后会恢复到原始状态 可与 transition:transform 3s;实现过渡效果
2.元素缩放 参照点:中心 transform:scale(倍数);
3.旋转 transform:rotate(x deg); 旋转轴向判定,左手握住要旋转轴向,四指方向为正方向
4.斜切 transform:skew(x deg,y deg);
5.复合效果 transform: 位移 旋转 …;
2. Transform转换(3d)
1.transform:translate3d(x,y,z); 位移
2.transform:scale3d(x,y,z); 缩放
3.transform:rotate3d(x,y,z,angle); 旋转
3. 过渡
过渡效果执行完成后会还原到原始状态
过渡效果只能由一个数值变为另一个数值,所以有些属性不是具体数值的不能起效果
过渡只能是一个状态到另一个状态
1.复合属性:transition:属性名称 过渡时间 时间函数 延迟 steps(步数)
2.transition-property 设置过渡效果的css属性的名称
3.transition-duration 设置完成过渡所需时间
4.transition-timing-function 设置过渡时间函数(过渡效果)
5.transition-delay 过渡效果延迟时间
6.为多个属性添加样式用逗号隔开(transition:属性名称1 过渡时间 时间函数 延迟 steps(步数),属性名称2 过渡时间 时间函数 延迟 steps(步数))
7.为所有样式添加过渡效果 transition: all 2s;(不建议用这个)
4.动画
动画本质即是:过渡的加强版,过渡只能设置起始状态,而动画可以指定中间任意帧数
1.使用步骤:
(1)首先创建动画
①
@keyframes 动画名{
0%{transform:translate(0,0);}
50%{transform:translate(500px,0);}
100%{transform:translate(500px,500px);}}
②在对应物体的css上使用 animation-name:动画名; 来指定动画名
③然后使用 animation-duration:2s;来指定动画耗时
④特殊:0%{}可以用from{}代替.100%{}可以用to{}代替
⑤
(2)属性设置
①animation-iteration-count:5;指定动画循环次数(无限次 值设置为infinite)
②animation-direction:alternate; 设置动画为往复(来去算动画执行两次,所以需要设置 animation-iteration-count 次数大于1才有效果)
③animation-delay:2s; 设置动画延迟
④animation-fill-mode:forwards设置动画结束时的状态 (默认情况动画执行完成后会恢复到原点)
1)其有三个属性值:forwards 会让动画保持结束的状态
2)backwords 不会让动画保持结束的状态,但是动画如果有初始状态,会立即展示该状态(比如设置了延迟执行)
3)both 上述两个属性的融合
⑤annimation-timing-function:linear 设置动画曲线函数
⑥animation-paly-state: 设置动画播放状态
1)有两个属性 paused 暂停动画
2)running 播放动画
