一、平移、缩放、旋转
-
平移
transform:translate(200px,300px) translateX() translateY()
// 水平方向平移,垂直方向平移
- 缩放
transform:scale(2,3) scale(1) scaleX(3) scaleY(2)
//宽度缩放、高度缩放
- 旋转
transform:rotate(60deg)
// deg度数 默认为顺时针
二、过渡属性transition
- 从一种状态过渡到另外一种状态
- 属性 时间 运动曲线 延迟
//A状态 width200px
transition:width 2s
transition-property //规定设置过渡效果的 CSS 属性的名称; all
transition-duration //规定完成过渡效果需要多少秒或毫秒。
transition-timing-function //规定速度效果的速度曲线。
//默认,先加速再减速 ease
//匀速:linear,
//ease in 速度越来越快
//ease out 越来越慢
//ease in out 先加速再减速
transition-delay //定义过渡效果何时开始;
三、animation动画
- 动画名字、时间、运动曲线、延迟
.box{
animation:move 2s;
}
@keyframes move{
0%{
width:100px;
}
100%{
width:600px;
}
}
.box{
animation:move 2s;
}
@keyframe move{
0%{
transform:translateX(200px)
}
25%{
transform:translateY(200px)
}
50%{
transform:translateX(-200px)
}
75%{
transform:translateY(-200px)
}
}
- animation: infinite (执行无限次)
- animation: forwards(最后一帧固定)