Css3动画相关的属性
过渡动画
定义:一个元素的某些属性从一个状态到另一个状态的变换
width:200px—->width:400px
transition: 要过渡的属性 持续时间 延迟的时间 运动曲线;
transition:width 1s 0s linear
运动曲线:
匀速 linear
由快到慢 ease 默认值
由慢到快再到慢 ease-in-out
多个值过渡
transition:bgackground-color 1s linear, width 1s linear ,height 1s linear;
transition:all 1s linear; all关键字是浏览器自动设置所有触发的属性的过渡
变形动画
2d变形
transform:变形类型;
平移translate
transform:translate(x,y);
x:水平平移 +x 水平向右平移 -x水平向左平移
y:垂直平移 +y 垂直向下平移 -y垂直向上平移
旋转 rotate
顺时针:+角度 deg度数
transform:rotate(45deg);
逆时针:-角度
transform:rotate(-45deg)
设置旋转中心点
2d变形默认的变形中心是盒子的中心点 transform-origin:50% 50%/center center;
transform-origin:xpx ypx / % % /right center left top bottom
缩放 scale
transform:scale(m,n); m代表宽度缩放倍数 n代高度的缩放倍数
m=0.5 宽度缩小为原来的一半(0.5倍)
m=2 宽度放大到原来的2倍 >1放大 <1缩小
倾斜skew
transform:skew(x,y); +deg向坐标轴的正方向的反方向倾斜 -deg 向坐标轴的正方向倾斜
x代表水平方向切斜的度数
y代表垂直方向倾斜的度数
3d变形
关键帧动画
1、定义动画
@keyframes 动画名 {
//动画有几个关键状态 2个关键状态 from{}to{}
//动画有多个关键帧 n个
0% {
} 20% {
} 50% {
} 75% {
} 100% {
}
}
2、使用动画
animation:动画的名称 持续的时间 延时时间 运动曲线 执行次数 是否往返运动 最后一帧完成后的状态 动画的运动状态
动画的名称: animation-property:move;
持续的时间 animation-duration:5s;
延时时间 animation-delay:2s;
运动曲线 animation-timing-function:linear匀速/ease放缓(默认值)/ease-in/ease-in-out
执行次数 animation-iteration-count:2/infinite无限次
是否往返运动 animation-direction:normal正常/alternate反向
最后一帧完成后的状态 animation-fill-mode:forwards动画最后的状态保持最后一帧/backwords初始状态(默认值);
动画的运动状态 animation-play-state:running/paused;