2D倾斜
transform:skew(30deg,30deg)
skew(x,y),skewX(),skewY()
关键帧动画
//声明动画
@keyframes test{
from{
width:200px;
height:200px;
background:red;
}
to{
width:500px;
height:500px;
background:yellow;
}
}
//调用
animation:test 2s linear;
多种状态动画
//声明动画
@keyframes test{
0%{
width:200px;
height:200px;
background:red;
}
50%{
width:500px;
height:500px;
background:yellow;
}
100%{
width:1000px;
height:1000px;
background:blue;
}
}
//调用
animation:test 2s linear;
动画无限次循环执行
animation:name 1s liner infinite;
animation拆分成单一属性
animation-name //名字
animation-delay //延迟
animation-iteration-count //循环次数
animation-direction //normal（正常方向运动）,reverse(反方向运动),alternative（正常交替运行），alternate-reverse（反方向交替运行）
animation-play-state //暂停或播放
animation-duration //持续时间
animation-timing-function //动画类型
translateX(-100%)里面的100%是相对于自身的100%
让动画停留在最后状态
animation-fill-mode:none; //forwards（保持最后的状态）,backwards（保持第一帧的状态）
//none是默认值
用animation做轮播图示例
@keyframes swiperrun{
0%{
transform:translateX(0); //第一章
}
5%{
transform:translateX(-640px); //第一章
}
25%{
transform:translateX(-640px); //第二张
}
30%{
transform:translateX(-1280px); //第二张
}
50%{
transform:translateX(-1280px);
}
55%{
transform:translateX(-1920px);
}
75%{
transform:translateX(-1920px);
}
80%{
transform:translateX(-2560px);
}
100%{
transform:translateX(-2560px);
}
}
//鼠标停在轮播图上停止
.swiper-wrapper:hover{
animation-play-state:paused;
}
//调用
animation:swiperrun 10s linear infinate;
//为了实现无缝轮播，最后一份应该和第一份是一样的
