CSS变形与动画

变形

div{
transform: rotateX(180deg);/*绕X轴旋转180度*/
/*
rotate 旋转
rotateX, rotateY, rotateZ 绕X,Y,Z轴旋转
scale 缩放
X,Y,Z ...
skew 倾斜
X,Y ...
translate 移动
X,Y,Z ...
单位:角度deg
*/
}

过渡

div{
transform: rotateX(180deg);
transition: all 1s ease 2s; /* 所有属性 持续1秒 速度曲线为ease 延迟1秒开始*/
/*
transition-property 属性
animation-duration 持续时间
transition-timing-function 速度曲线 ease linear ...
transition-delay 延时
*/
}

动画

/* 定义动画myani: 宽度从100px到300px */
@keyframes myani{
0%{
width: 100px;
/* css */
}
100%{
width: 300px;
/* css */
}
}

div{
animation: myani 5s;/* 使用动画myani, 持续5秒 */
/*
animation-name  要使用的@keyframes名称
animation-duration  持续时间
animation-timing-function   速度曲线
animation-delay 延迟
animation-iteration-count  动画循环次数
animation-direction 下一周逆向播放
animation-play-state 动画运行、暂停状态
animation-fill-mode 不播放动画时的状态 forwards播放结束后保留在最后一帧状态
*/
}