前端09

过渡动画

transition产生动画
border-radius圆角
设置过渡的时间:
transition-duration:linear匀速
ease开始和结束慢
ease-in开始慢
ease-out结束慢
bezier贝赛尔曲线
默认文字不可见overflow: hidden;
背景设置不可见:backface-visibility:hidden
display:none隐藏
perspective()rotateY()透视距离
transform-style:preseve-3d设置3D效果

变形分四种

1.位移translate
2.缩放scale
3.旋转rotate
4.斜切skew

animation动画

动画暂停animation-play-state: paused;
动画运行animation-play-state: running;
定义一个动画，名称为moving
@keyframes moving{
/初始状态/
from{
width: 200px;
}
/结束状态/
to{
width: 500px;
}

steps设置动画步数
infinite无限次,无穷