阿里云首页逐帧动画steps

最新推荐文章于 2025-07-06 20:21:56 发布

原创最新推荐文章于 2025-07-06 20:21:56 发布 · 852 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#animation动画详解 #steps

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用CSS3的steps动画实现阿里云首页的逐帧动画效果，并通过JavaScript控制鼠标悬停时的动画播放与停止，避免了使用hover伪类的限制。

前几天在某网站上看到别人的一个问题，其实这个问题之前也看到过也留意过，但是没有深入研究过，当我自己打算去写的时候，发现里面还是有很多的学问，所以今天把自己的一些问题和方法分享一下。

实现的是阿里云首页的逐帧动画的效果：
这里写图片描述

刚开始有个误区，以为是使用css3平滑过渡利用background-position变换来实现图片的动画。后来试过之后发现其实不是这样，而是利用animate中steps来实现动画效果，具体误区可以参考https://codepen.io/HelloLeeChan/full/KzQWaY
有了这些知道后就去查找steps()的用法，后来参考了一点别人的博客略略明白了一点。
参考：https://segmentfault.com/a/1190000007042048
http://www.imooc.com/article/7687

有了这些认识就开始着手，自己写这个效果。这个效果总共分两步mouseover和mouseleave。

首先计算动画的帧数，我们这里用的图片就是https://img.alicdn.com/tps/TB1icTcLXXXXXclXFXXXXXXXXXX-150-9000.jpg
一共有60帧，所以我们的steps要分60份，之后解释为什么这里用59份而不是60份。
mouseover的时候背景向上滚

animation: slide-market20 1s steps(59,end);

@keyframes slide-market20 {
    0% {
        background-position: 0 0;
    }
    100%{
        background-position: 0 -4425px;
    }
}

mouseleave的时候背景向下滚，要返回来

animation: slide-market21 1s steps(59,end);

@keyframes slide-market21 {
    0% {
        background-position: 0 -4425px;
    }
    100%{
        background-position: 0 0px;
    }
}

这里之所以用59帧是因为我们这个动画还有回滚的效果就是逆向动画的效果，所以第60帧就多了，我也试过60帧，就是动画会有闪烁的效果，不平滑。
然后到这里动画效果算是写好了，然后要写触发事件了。

触发事件：
一开始我想到的是用hover伪类，这样就不用js来控制了，但是发现hover伪类不能控制离开之后的效果，当离开的时候就没用动画只有状态了，所以这样肯定是不行的。
然后我又在图片的本身加一个animation这样是可以达到这个离开的动画，但是当一刷新页面进来的时候就会触发动画和我们鼠标上去来触发又不一样，所以最后还是采用js来控制触发事件，具体代码

$(function  () {
    $(".ali-product-img").mouseover(function  () {
        $(this).removeClass("slide-market21").addClass("slide-market20")
    })
    $(".ali-product-img").mouseleave(function  () {
        $(this).removeClass("slide-market20").addClass("slide-market21")
    })
})

这样我们的效果就实现了，最后贴上总体代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            *{padding: 0; margin: 0;}
            .ali-product-img{
                position: relative;
                height: 75px;
                width: 75px;
                background:url(img/000.jpg) no-repeat ;
                margin: 0 auto;
                background-size: 75px;
                background-position: 0 0;
            }
            .slide-market20 {
                animation: slide-market20 1s steps(59,end);

            }
            .slide-market21 {
                animation: slide-market21 1s steps(59,end);
            }
            @-webkit-keyframes slide-market20 {
                0% {
                    background-position: 0 0;
                }
                100%{
                    background-position: 0 -4425px;
                }
            }
            @-webkit-keyframes slide-market21 {
                0% {
                    background-position: 0 -4425px;
                }
                100%{
                    background-position: 0 0px;
                }
            }
        </style>
        <div class="ali-product-img" ></div>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" language="javascript"> 
            $(function  () {
                $(".ali-product-img").mouseover(function  () {
                    $(this).removeClass("slide-market21").addClass("slide-market20")
                })
                $(".ali-product-img").mouseleave(function  () {
                    $(this).removeClass("slide-market20").addClass("slide-market21")
                })
            })
        </script> 
    </body>
</html>