css3-转换 旋转 过渡 动画
转换
transform 转换
translate(x,y) 位移
translateX() 设置水平方向位移
translateY() 设置垂直方向位移
旋转
rotate() 旋转
transform: rotate(45deg);
scale() 缩放
transform: scale(0.5);
skew() 倾斜
transform: skew(45deg);
transform: scale(1.5) rotate(45deg) skew(45deg);
过渡
transition 过渡 property属性
transition-property: width; 过渡改变的属性
transition-property
none:无
property 属性
all 所有属性
transition-duration:2s ;持续的时间,秒为单位
transition-timing-function:ease;过渡函数
linear 线性过渡
ease 平滑过渡
ease-in 由慢到快
ease-out 由快到慢
ease-in-out 由慢到快再到慢
step-start 步长 开始
step-end 步长 结束
steps() 帧
transition-delay: 2s;过渡延迟时间
transition: width 2s ease 3s;
transition: 过渡属性 持续时间 过渡函数 延迟时间;
动画
animation-name: move; 动画名称
animation-duration: 2s; 动画持续时间
animation-timing-function: ease; 动画函数
ease 平滑过渡
ease-in 由慢到快
ease-out 由快到慢
ease-in-out 由慢到快再到慢
step-start 步长 开始
step-end 步长 结束
steps() 帧
animation-delay: 3s; 动画延迟
animation-iteration-count:infinite; 动画播放的次数
number 具体次数
infinite 无限的
animation-direction: alternate-reverse; 动画的方向
normal 正常
reverse 反向
alternate 交替执行
alternate-reverse 先反向,再交替执行
animation: move 10s ease 2s infinite alternate;
ease 平滑过渡
infinite 无限的
alternate 交替执行
animation 动画名称 持续时间 过渡函数 延迟时间 播放次数 动画方向
定义一个动画
@keyframes move{
from{
}
to{
}
}