css3 animation动画

最新推荐文章于 2022-08-18 20:13:50 发布

waiting 5h

最新推荐文章于 2022-08-18 20:13:50 发布

阅读量201

点赞数

文章标签： css3帧动画

本文链接：https://blog.csdn.net/weixin_43717987/article/details/90045278

版权

animation帧动画

关键帧：@keyframes --定义动画在不同阶段的状态

语法如下：第一种@keyframes keyframes-name {
from{相当于0%
}
to{相当于100%
}
}
第二种（中间可以任意调整百分比的值）@keyframes keyframes-name{
0%{
}
10%{
}
20%{
}
30%{
}
50%{
}
100%{
}
}

动画属性：properties --决定动画的播放时长，播放次数，播放方式。

动画属性类似于播放器，一个基本动画应具有暂停/播放，播放时长，播放顺序（逆序、正序、交替播放），播放次数等

动画方向:animation-direction,其属性表示动画是否反向播放
animation-direction：normal 正序播放
animation-direction：reverse 倒序播放
animation-direction:alternate 交替播放
animation-direction:alternate-reverse 反向交替播放
时间函数:animation-timing-function,其属性定义了动画的播放速度曲线
animation-timing-function：ease，规定慢速开始，然后变快，然后慢速结束的过渡效果
animation-timing-function：ease-in，规定以慢速开始的过渡效果
animation-timing-function：ease-out，规定以慢速结束的过渡效果
animation-timing-function：ease-in-out，规定以慢速开始和结束的过渡效果
animation-timing-function：linear,匀速播放
animation-timing-function：cubic-bezier(n,n,n,n)，在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
动画执行时间animation-duration
值的单位为秒或毫秒
动画延迟：animation-delay
其属性定义动画从何时开始播放，即动画从应用到元素上到动画开始的这段时间长度，默认值为0s，值以秒或毫秒为单位。
动画迭代次数:animation-iteration-count,其属性定义动画播放的次数，默认只播放一次
animation-iteration-count：number/infinite
动画填充模式：animation-fill-mode，指给定动画播放前后应用元素的样式
animation-fill-mode：none，动画前后不改变任何样式
animation-fill-mode：forwards，动画结束后保持目标动画最后一帧的样式
animation-fill-mode：backwards，动画结束后保持目标动画第一帧的样式
animation-fill-mode：both,动画将会执行forwards和backwards执行的动作
动画播放状态：animation-play-state，定义动画是否进行或暂停
animation-play-state：running，动画正常播放（默认）
animation-play-state，动画暂停播放

下面是用帧动画写的一个小案例

<html><head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;

        }
        ul{
            position: absolute;
            width: 200%;
            height: 100%;
            margin-left: -50%;
            animation: ks 20s linear infinite;

        }
        @keyframes ks {
            from{
                margin-left: -50%;

            }
            to{
                margin-left: 0%;
            }
        }
        ul>li{
            float: left;
            width: 50%;
            height: 100%;
            background: url(./image/2.jpg);
            background-size:100% 100% ;
        }
        .wukong{
            position: absolute;
            width: 200px;
            height: 180px;
            top: 50%;
            left: 200px;
            background: url("./image/west_01_3ca39fe.png");
            animation: wu 2s steps(8) infinite;

        }
        @keyframes wu {
            from{
                background-position: 0 0;
            }
            to{
                background-position:  -1600px 0;
            }

        }
        .zhu{
            position: absolute;
            width: 200px;
            height: 180px;
            top: 50%;
            left: 250px;
            background: url("./image/west_02_47bad19.png");
            animation: zhu 2s steps(8) infinite;

        }
        @keyframes zhu {
            from {
                background-position: 0 0;
            }
            to {
                background-position: -1600px 0;
            }
        }
        .shifu{
            position: absolute;
            width: 170px;
            height: 180px;
            top:5%;
            left: 500px;
            background: url("./image/west_03_f962447.png");
            animation: shifu 2s steps(8) infinite;


        }
        @keyframes shifu {
            from{
                background-position: 0 0;
            }
            to{
                background-position:  -1360px 0;
            }

        }
        .shaseng{
            position: absolute;
            width: 210px;
            height: 180px;
            top: 50%;
            left: 700px;
            background: url("./image/west_04_6516d80.png");
            animation: shaseng 2s steps(8) infinite;


        }
        @keyframes shaseng {
            from{
                background-position: 0 0;
            }
            to{
                background-position:  -1680px 0;
            }

        }
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
</ul>
<div class="wukong">
    <div class="zhu"></div>
    <div class="shifu"></div>
    <div class="shaseng"></div>

</div>


</body></html>

waiting 5h

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css3 animation动画

animation帧动画关键帧：@keyframes --定义动画在不同阶段的状态语法如下：第一种@keyframes keyframes-name {from{相当于0%}to{相当于100%}}第二种（中间可以任意调整百分比的值）@keyframes keyframes-name{0%{}10%{}20%{}30%{}50%{}100%{}...
复制链接

扫一扫