css3-转换 旋转 过渡 动画

 

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{
    }
}