@-webkit-keyframes slide {
0%, 100% {
background-image: url("../img/bg1.jpg"); }
33% {
background-image: url("../img/bg2.jpg"); }
66% {
background-image: url("../img/bg3.jpg"); } }
@-moz-keyframes slide {
0%, 100% {
background-image: url("../img/bg1.jpg"); }
33% {
background-image: url("../img/bg2.jpg"); }
66% {
background-image: url("../img/bg3.jpg"); } }
@-o-keyframes slide {
0%, 100% {
background-image: url("../img/bg1.jpg"); }
33% {
background-image: url("../img/bg2.jpg"); }
66% {
background-image: url("../img/bg3.jpg"); } }
@keyframes slide {
0%, 100% {
background-image: url("../img/bg1.jpg"); }
33% {
background-image: url("../img/bg2.jpg"); }
66% {
background-image: url("../img/bg3.jpg"); } }
@media -sass-debug-info{filename{font- family:file\:\/\/D\:\/Projects\/Work\/Vegetables2\/css\/sass\/main\.sass}line{font-family:\0000333}}
.banner {
display: table;
width: 100%;
margin: 0 auto;
text-align: center;
height: 100vh;
color: rgba(255, 255, 255, 0.9); }
@media -sass-debug-info{filename{font- family:file\:\/\/D\:\/Projects\/Work\/Vegetables2\/css\/sass\/main\.sass}line{font-family:\0000340}}
.banner:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(118, 144, 164, 0.4);
z-index: 0; }
@media -sass-debug-info{filename{font-family:file\:\/\/D\:\/Projects\/Work\/Vegetables2\/css\/sass\/main\.sass}line{font-family:\0000349}}
.v-center {
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 4;
padding: 0 5%; }
@media -sass-debug-info{filename{font-family:file\:\/\/D\:\/Projects\/Work\/Vegetables2\/css\/sass\/main\.sass}line{font-family:\0000355}}
.banner-bg {
display: table;
height: 100%;
width: 100%;
background: #222;
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
top: 0;
position: absolute;
z-index: 0;
animation: slide ease-in-out 30s both infinite;
-webkit-animation: slide ease-in-out 30s both infinite inline-block;
-moz-animation: slide ease-in-out 30s both infinite inline-block;
-o-animation: slide ease-in-out 30s both infinite inline-block; }
/*# sourceMappingURL=main.css.map */
Добавить комментарий
|
1 ответ
Анимации по-разному назовите и заработает, например slide1 для хром, slide2 для оперы и тд
-
-
Только сейчас заметил, что это у вас там за inline-block в самом конце свойства? 31 мая 2016 в 15:26