css3的clip使用

之前看http://daneden.github.io/animate.css/网站源码发现css3有一个clip属性具体用法下面我粘贴了一段他的css：

/*-----------------------------------*\
  $HEADER
\*-----------------------------------*/
.site__title {
	font-size:100px;
	color: #f35626;
	background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: hue 1s infinite linear;
}

/*-----------------------------------*\
  $ANIMATIONS
\*-----------------------------------*/

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }

  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

<h1 class="site__title">Animate.css</h1>

这里一共两个主要知识点
1、css3 clip的使用，可以实现渐变文字

background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

2、css3滤镜特效filter:hue-rotate()，可以实现绚丽的渐变动画

@-webkit-keyframes hue {
    from {-webkit-filter: hue-rotate(0deg);}
    to {-webkit-filter: hue-rotate(-360deg);}
}

我在使用中发现这个动画只是兼容webkit内核浏览器，于是复制了动画代码去掉-webkit-标识后火狐正常了，但是webkit内核不好使了，于是发现这个效果不能并存，至少目前没有找到解决办法。