css3实现动画

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>
发布了34 篇原创文章 · 获赞 4 · 访问量 1316
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览