css3实现动画

最新推荐文章于 2023-08-22 16:39:13 发布

土垚金鑫

最新推荐文章于 2023-08-22 16:39:13 发布

阅读量169

点赞数

分类专栏： css3 文章标签： jquery vue.js css3 css

本文链接：https://blog.csdn.net/weixin_44994731/article/details/104010571

版权

css3 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

CSS3 animation 属性
定义和用法
animation 属性是一个简写属性，用于设置六个动画属性：

属性	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画

用法：

animation: name duration timing-function delay iteration-count direction;

①animation-name
定义和用法
animation-name 属性为 @keyframes 动画规定名称。

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

语法：

animation-name: keyframename|none;

属性	描述
keyframename	规定需要绑定到选择器的 keyframe 的名称
none	规定无动画效果（可用于覆盖来自级联的动画）。

②animation-duration
③animation-timing-function
③animation-delay
④animation-iteration-count
⑥animation-direction
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了

本案例主要参考了 http://wanlimm.com/77201809146901.html 这个网址的内容。
案例如下：
在这里插入图片描述
将上面的图片进行移动
代码如下：

注意卡顿问题。

总结解决 CSS3 动画卡顿方案
1.尽量使用 transform 当成动画熟悉，避免使用 height,width,margin,padding 等；
2.要求较高时，可以开启浏览器开启 GPU 硬件加速。

如：
-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

案例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-size:32px;
            background:#000;}
        .bear{
            width:200px;
            height:200px;
            position:absolute;
            left:-4%;
            top:50%;
            margin-left:-100px;
            margin-top:-100px;
            background:url(../../assets/images/bear.png) no-repeat 0 0;
            animation:run 3.6s step-end forwards infinite,move 0.8s steps(4,end) 3.6s infinite;
        }
        @keyframes run{
            /*第一个完步，时间间隔1.38888889%，图片间隔一个熊，位置间隔1.75%*/
            0% {
                background-position: 0em 0;
                left: -4%;
            }
            1.38888889% {
                background-position: -6.25em 0;
                left: -2.25%;
            }
            2.77777778% {
                background-position: -12.5em 0;
                left: -0.5%;
            }
            4.16666667% {
                background-position: -18.75em 0;
                left: 1.25%;
            }
            5.55555556% {
                background-position: -25em 0;
                left: 3%;
            }
            6.94444444% {
                background-position: -31.25em 0;
                left: 4.75%;
            }
            8.33333333% {
                background-position: -37.5em 0;
                left: 6.5%;
            }
            9.72222222% {
                background-position: -43.75em 0;
                left: 8.25%;
            }
            11.11111111% {
                background-position: -50em 0;
                left: 10%;
            }
            /*第二个完步开始，时间间隔1.66666667%，间隔一个熊，位置间隔1.5%。速度比第一个完步慢。*/
            11.11111111% {
                background-position: 0em 0;
                left: 10%;
            }
            12.77777778% {
                background-position: -6.25em 0;
                left: 11.5%;
            }
            14.44444444% {
                background-position: -12.5em 0;
                left: 13%;
            }
            16.11111111% {
                background-position: -18.75em 0;
                left: 14.5%;
            }
            17.77777778% {
                background-position: -25em 0;
                left: 16%;
            }
            19.44444444% {
                background-position: -31.25em 0;
                left: 17.5%;
            }
            21.11111111% {
                background-position: -37.5em 0;
                left: 19%;
            }
            22.77777778% {
                background-position: -43.75em 0;
                left: 20.5%;
            }
            24.44444444% {
                background-position: -50em 0;
                left: 22%;
            }
            /*第三个完步开始，时间间隔1.94444444%，间隔一个熊，位置间隔1.25%。速度比第二个完步慢。*/
            24.44444444% {
                background-position: 0em 0;
                left: 22%;
            }
            26.38888889% {
                background-position: -6.25em 0;
                left: 23.25%;
            }
            28.33333333% {
                background-position: -12.5em 0;
                left: 24.5%;
            }
            30.27777778% {
                background-position: -18.75em 0;
                left: 25.75%;
            }
            32.22222222% {
                background-position: -25em 0;
                left: 27%;
            }
            34.16666667% {
                background-position: -31.25em 0;
                left: 28.25%;
            }
            36.11111111% {
                background-position: -37.5em 0;
                left: 29.5%;
            }
            38.05555556% {
                background-position: -43.75em 0;
                left: 30.75%;
            }
            40% {
                background-position: -50em 0;
                left: 32%;
            }
            /*第四个完步开始，时间间隔2.22222222%，间隔一个熊，位置间隔1%。速度比第三个完步慢。*/
            40% {
                background-position: 0em 0;
                left: 32%;
            }
            42.22222222% {
                background-position: -6.25em 0;
                left: 33%;
            }
            44.44444444% {
                background-position: -12.5em 0;
                left: 34%;
            }
            46.66666667% {
                background-position: -18.75em 0;
                left: 35%;
            }
            48.88888889% {
                background-position: -25em 0;
                left: 36%;
            }
            51.11111111% {
                background-position: -31.25em 0;
                left: 37%;
            }
            53.33333333% {
                background-position: -37.5em 0;
                left: 38%;
            }
            55.55555556% {
                background-position: -43.75em 0;
                left: 39%;
            }
            57.77777778% {
                background-position: -50em 0;
                left: 40%;
            }
            /*第五个完步开始，时间间隔2.5%，间隔一个熊，位置间隔0.75%。速度比第四个完步慢。*/
            57.77777778% {
                background-position: 0em 0;
                left: 40%;
            }
            60.27777778% {
                background-position: -6.25em 0;
                left: 40.75%;
            }
            62.77777778% {
                background-position: -12.5em 0;
                left: 41.5%;
            }
            65.27777778% {
                background-position: -18.75em 0;
                left: 42.25%;
            }
            67.77777778% {
                background-position: -25em 0;
                left: 43%;
            }
            70.27777778% {
                background-position: -31.25em 0;
                left: 43.75%;
            }
            72.77777778% {
                background-position: -37.5em 0;
                left: 44.5%;
            }
            75.27777778% {
                background-position: -43.75em 0;
                left: 45.25%;
            }
            77.77777778% {
                background-position: -50em 0;
                left: 46%;
            }
            /*第六个完步开始，时间间隔逐步增多2.77777776%，2.77777777%等，间隔一个熊，位置间隔0.5%。速度比第五个完步慢。逐步慢下来*/
            77.77777778% {
                background-position: 0em 0;
                left: 46%;
            }
            80.55555556% {
                background-position: -6.25em 0;
                left: 46.5%;
            }
            83.33333333% {
                background-position: -12.5em 0;
                left: 47%;
            }
            86.11111111% {
                background-position: -18.75em 0;
                left: 47.5%;
            }
            88.88888889% {
                background-position: -25em 0;
                left: 48%;
            }
            91.66666667% {
                background-position: -31.25em 0;
                left: 48.5%;
            }
            94.44444444% {
                background-position: -37.5em 0;
                left: 49%;
            }
            97.22222222% {
                background-position: -43.75em 0;
                left: 49.5%;
            }
            100% {
                background-position: -50em 0;
                left: 50%;
            }
        }
        @keyframes move{
            0%{
                background-position:0 0;}
            100%{
                background-position:-1600px 0;}
        }


    </style>
</head>
<body>
    <div class="bear">

    </div>
</body>
</html>