隔离CSS代码

时间:2015-10-16 05:26:41

标签: html css animation

我正在使用一个消费者网站构建程序(EverWeb),它能够将HTML代码段添加到页面中。我想在工作页面上添加一个额外的代码段,但我最后一段代码的代码会影响页面上的其他代码段。

是否有办法配置代码以使其保持“隔离”状态。从页面上发生的其他事情(我不是编码员)。

我正在使用的代码如下。

感谢。

<img class="big" src="{!-ASSETSPATH-!}Images/big@2x.png" height="65" width="600" alt="" />

<style type="text/css">

@-webkit-keyframes fadeIn{ 
0% {opacity: 0;}
38% {opacity: 1;} 
76% {opacity: 1;}
100% {opacity: ;} 
}
@-moz-keyframes fadeIn{ 
0% {opacity: 0;}
38% {opacity: 1;} 
76% {opacity: 1;}
100% {opacity: ;} 
}
@-o-keyframes fadeIn{ 
0% {opacity: 0;}
38% {opacity: 1;} 
76% {opacity: 1;}
100% {opacity: ;} 
}
@keyframes fadeIn{ 
0% {opacity: 0;}
38% {opacity: 1;} 
76% {opacity: 1;}
100% {opacity: ;} 
}

.big {
opacity:0;
-webkit-animation:fadeIn ease-in 1; 
-moz-animation:fadeIn ease-in 1;
-o-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;

-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:8s;
-moz-animation-duration:8s;
-o-animation-duration:8s;
animation-duration:8s;

-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}

</style>

1 个答案:

答案 0 :(得分:0)

刚刚找到解决方案:使用相同的名称。我正在使用动画名称“fadeIn”。我将所有这些实例改为“imgFade”,一切正常。