css变化以及动画播放
形变 transform : 位移 缩放 旋转 参照点
位移:
translateX() : X 轴平移
translateY() : Y轴的平移
translate() : 平移
1个数 -- X轴平移
2个数 -- X轴Y轴同时平移
缩放
scaleX() : X轴缩放
scaleY() : Y轴的缩放
scale() : 缩放
1个数 --- X轴Y轴同时缩放
2个数 --- X轴Y轴对应缩放
旋转:
rotate() : 旋转, 单位:角度deg
transform-origin: 形变的参照点
关键字:
left center right
top center bottom
1个关键字 默认被省略的为center
2个关键字
百分数
像素点
transform: 形变函数;
transform:scale(2);
transform:rotate(360deg);
transform:scale(2) rotate(360deg);
@keyframes 动画片段的名称{
进度{样式}
0%,100%{left:0; top:0;background-color:white;}
32%{left:200px;top:100px;background-color:green;}
100%{left:0; top:0;background-color:red;}
}
播放动画 : animation
animation-name : 动画名称
animation-duration:一次动画播放的时间
animation-delay : 延迟动画时间
animation-timing-function : 动画播放的速度函数
animation-iteration-count :
N -- 播放的次数
infinite -- 播放无数次、
animation-direction : 动画播放的方向
normal --- 正向
reverse ---- 反向播放
alternate ---- 正向->反向->正向-反向
alternate-reverse 反向->正向-反向-正向
animation:name duration timing-function delay iteration-count direction;
name duration 不能省略, 其他可视情况省略
duration delay :