在实际开发中，我们还可以将滤镜效果和动画效果结合起来，如果运用得好，甚至会为页面添色不少。下面我们来尝试做一个“鬼屋”的动画效果，小伙伴们可以看看具体是怎么实现的。

实在代码如下：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body {text-align: center;}
        /*调用动画*/
        img {animation: haunted 5s infinite;}
        /*定义动画*/
        @keyframes haunted {
            0% 
            {
                -webkit-filter: brightness(20%);
                filter: brightness(20%);
            }
            40% 
            {
                -webkit-filter: brightness(20%);
                filter: brightness(20%);
            }
            50% 
            {
                -webkit-filter: sepia(1) contrast(2) brightness(200%);
                filter: sepia(1) contrast(2) brightness(200%);
            }
            60% 
            {
                -webkit-filter: sepia(1) contrast(2) brightness(200%);
                filter: sepia(1) contrast(2) brightness(200%);
            }
            62% 
            {
                -webkit-filter: brightness(20%);
                filter: brightness(20%);
            }
            96% 
            {
                -webkit-filter: brightness(20%);
                filter: brightness(20%);
            }
            96% 
            {
                -webkit-filter: brightness(400%);
                filter: brightness(400%);
            }
        }
    </style>
</head>
<body>
    <img src="img/house.png" alt="">
</body>
</html>

浏览器预览效果如下图所示。