HTML5学习笔记(5.0)_akeyframes swiperrun-优快云博客

文章介绍了CSS3中的2D倾斜变换，如`skew()`和`transform:skew()`,并展示了如何使用关键帧动画创建元素尺寸变化的效果。同时，详细讲解了如何构建无限循环的动画，包括设置`animation`的各种属性如`duration`、`iteration-count`和`play-state`。此外，文章还通过示例演示了如何运用这些技术来实现无缝轮播图，当鼠标悬停时能暂停动画的交互功能。

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;

//为了实现无缝轮播，最后一份应该和第一份是一样的