css帧动画的使用实例

1、demo1

html代码

css代码

.shumen{
    animation: shumen01 1s linear forwards;
}
@keyframes shumen01 {
 0%{
     opacity: 1;
 }
    100%{
        opacity: 0;
    }
}

2、demo2

html代码

css代码

.shumen{
    width: 640px;
    height: 1200px;
    animation: shumen02 8s linear;
}
@keyframes shumen02 {
    0%{
        background-image: url("image/1.jpg");
    }
    14%{
        background-image: url("image/2.jpg");
    }
    28%{
        background-image: url("image/3.jpg");
    }
    42%{
        background-image: url("image/4.jpg");
    }
    56%{
        background-image: url("image/5.jpg");
    }
    70%{
        background-image: url("image/6.jpg");
    }
    84%{
        background-image: url("image/7.jpg");
    }
    100%{
        background-image: url("image/8.jpg");
    }
}

3、demo3

total.jpg

html代码

css代码

.shumen{
    width: 640px;
    height: 1136px;
    background-image: url("image/total.jpg");
    animation: shumen03 5s step-start infinite;
}
@keyframes shumen03 {
    0%{

        background-position: 4480px 0;
    }
    14%{
        background-position: 3840px 0;
    }
    28%{
        background-position: 3200px 0;
    }
    42%{
        background-position:  2560px 0;
    }
    56%{
        background-position: 1920px 0;
    }
    70%{
        background-position: 1280px 0;
    }
    84%{
        background-position: 640px 0;
    }
    100%{
        background-position: 0 0;
    }
}