01transition过度
过渡:给用户呈现 由一种样式到另一种样式的过程
指定当前box具有过渡效果
过渡的属性名称
transition-property: width height;
过渡花费的时间
transition-duration: 1s;
过渡的曲线
匀速
transition-timing-function: linear;
缓慢
transition-timing-function: ease;
加速 由慢到快
transition-timing-function: ease-in;
快慢快
transition-timing-function: ease-in-out;
过渡何时开始
transition-delay:
过渡的简写形式 transition: all 1s ease;
03平移
transform: translate(100px, 0px);
04缩放
transform: scale(0.2, 0.2);
05旋转
transform: rotateX(90deg);
06转换原点
transform-origin: left top;
transform-origin: right top;
transform-origin: right bottom;
transform-origin: left bottom;
07倾斜
transform: skew(30deg,30deg);
083d透视
/* 透视 */
perspective: 1000px;
/* 背部可见性 */
backface-visibility: hidden;
/* 保留子元素的3d位置 */
transform-style: preserve-3d;
09animation动画
/* 应用到目标元素上 */
/* 动画名称 */
animation-name: move;
/* 动画时间 */
animation-duration: 1s;
/* 动画曲线 */
animation-timing-function: ease;
/* 动画何时开始 */
/* animation-delay: 2s; */
/* 动画次数 */
animation-iteration-count: infinite;
/* 动画是否暂停 */
animation-play-state: running;
/* 动画是否逆向 */
/* reverse 颠倒 */
/* alternate 交替 */
/* alternate-reverse 颠倒交替 */
animation-direction: alternate;
/* 动画之外的状态 */
/* animation-fill-mode: ; */
/* 创建一个自定义动画 */
@keyframes 动画名称{
两个动画帧
from{}
to{}
10多个动画帧
@keyframes move {
0% {
transform: translateX(0px) translateY(0px);
}
25% {
transform: translateX(700px) translateY(0px);
}
50% {
transform: translateX(700px) translateY(700px);
}
75% {
transform: translateX(0px) translateY(700px);
}
100% {
transform: translateX(0px) translateY(0px);
}
}