转换在CSS3中可以实现元素的移动(translate)、旋转(rotate)、缩放(scale)等效果
transform: translate(x,y); 或者分开写: translateX(50px); translateY(50px);
2D旋转可以让元素在2维平面内顺时针旋转或者逆时针旋转
rotate单位是 deg ,角度为: 顺时针、逆时针,默认是元素中心点
transform:rotate(50deg)
transform-origin: left bottom;
元素可以缩放,可以放大和缩小,x和y用逗号分隔 scale优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子
transform:scale(x,y); 只写一个参数,第二个数和第一个数一样,相当于 scale(2,2)
顺序会影转换效果,如果有位移和其他属性的时候,要将位移放到最前
transform: translate() rotate() scale()
可通过设置多个节点来控制一个或一组动画,常用来实现复杂动画效果,相比较过渡,动画可以实现更多变化、控制、连续自动播放等效果
1. 用keyframes 定义动画(类似定义类选择器)
@keyframes 动画名称 {
0% {
width:100px;
}
100% {
width:200px;
}
}
2. 动画序列
3. 元素使用动画
/* 调用动画 */ animation-name: 动画名称;
/* 持续时间 */ animation-duration: 持续时间;
4. 动画简写属性
animation: move 5s linear 2s infinite alternate;
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animation | 所有动画属性的简写属性,除了animation-play-state |
animation-name | 规定@keyframes动画的名称(必须写) |
animation-duration | 规定完成一个动画所花费的秒或毫秒,默认是0(必须写) |
animation-timing-function | 规定速度曲线,默认是“ease” |
animation-delay | 规定何时开始,默认是0 |
animation-iteration-count | 规定被播放的次数,默认是1,还有infinite |
animation-direction | 规定是否在下一动画逆向播放,默认是“normal“,alternate逆播放 |
animation-play-state | 规定运行或暂停动画。默认是”running”,还有”paused” |
animation-fill-mode | 规定动画结束后状态,保持forwards回到起始backwards |
/* 动画名称(必须) */
animation-name: move;
/* 动画花费时间 */
animation-duration: 2s;
/* 动画速度曲线 */
animation-timing-function: ease;
/* 动画何时开始 */
animation-delay: 0.3s;
/* 动画播放次数 */
animation-iteration-count: infinite;
/* 动画逆向播放 */
animation-direction: alternate;
/* 动画运行和暂停 */
animation-play-state: paused;
/* 动画结束后的状态 */
animation-fill-mode: forwards;
animation-timing-function:规定动画的速度曲线,默认是“ease”
值 | 描述 |
---|---|
linear | 匀速,动画从头到尾的速度是相同的 |
ease | 默认,动画以低速开始,然后加快,在结束前变慢 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始和结束 |
steps() | 指定了时间函数中的间隔数量(步长,要走多少步) |
3D移动在2D移动基础上多加了个可以移动的方向,就是Z轴方向
因为Z轴是垂直屏幕,由里指向外,所以默认是看不到元素在轴的方向上移动
translform: translateX(10px):在x轴上移动
translform: translateY(10px):在Y轴上移动
translform: translateZ(10px):在Z轴上移动(注意:translateZ一般用px单位)
translform: translate3d(x,y,z):x、y、z 分别指要移动的轴的方向的距离
浏览器私有前缀是为了兼容老版本写法,比较新版本的浏览器无须添加
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;