用bootstrap做了个自适应官网,滚动监听渐变在安卓手机中失效

Question

1.用bootstrap做了个自适应官网,滚动监听渐变在安卓手机中失效
2.代码块如下:

Answer 1

需要加个前缀来适配，比如：

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}

@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}

安卓用了 webkit 内核，所以要加

@-webkit-keyframes

Answer 2

can i use CSS3 animation

可知，安卓4.4以下不支持，4.4-56之间需要 -webkit- 前缀， 56 以后可以放心服用。

Answer 3

.animat{

animation: myAnimation 3s 0s ease-in-out both;
-moz-animation: myAnimation 3s 0s ease-in-out both;
-webkit-animation: myAnimation 3s 0s ease-in-out both;
-o-animation: myAnimation 3s 0s ease-in-out both;

}

@keyframes myAnimation {

0% {
    background-color: rgba(17,17,17,0.4);
}
25% {
    background-color: rgba(17,17,17,0.6);
}
50% {
    background-color: rgba(17,17,17,0.8);
}
100% {
    background-color: rgb(32,32,32);
}

}
@-moz-keyframes myAnimation { / Firefox /
0% {

background-color: rgba(17,17,17,0.4);

}
25% {

background-color: rgba(17,17,17,0.6);

}
50% {

background-color: rgba(17,17,17,0.8);

}
100% {

background-color: rgb(32,32,32);

}
}
@-webkit-keyframes myAnimation { /Safari和Chrome/
0% {

background-color: rgba(17,17,17,0.4);

}
25% {

background-color: rgba(17,17,17,0.6);

}
50% {

background-color: rgba(17,17,17,0.8);

}
100% {

background-color: rgb(32,32,32);

}
}
@-o-keyframes myAnimation { /Safari和Chrome/
0% {

background-color: rgba(17,17,17,0.4);

}
25% {

background-color: rgba(17,17,17,0.6);

}
50% {

background-color: rgba(17,17,17,0.8);

}
100% {

background-color: rgb(32,32,32);

}
}

div#example-navbar-collapse{

border-color: transparent;

}

div#example-navbar-collapse>ul>li>a{

font-size: 16px;
color: white;
line-height:50px;

}

div.navLogo{

padding: 0px;
margin-top: 1.6em;

}

div.navLogo>span{

font-size:26px;

}

div#example-navbar-collapse>ul{
padding-right: 1.5%;
}
div#example-navbar-collapse>ul>li{
margin-right: 1em;
}

这是完整答案