css3关键帧，边框图像改变右偏移的动画

Question

我正在尝试为 border-image 制作动画在 <section> 的底部但它不起作用。你能帮我吗 ？

这是CSS:

section.intro {
/*  border-color:#06b4c8;*/
/*  border-style:solid;*/
/*  border-width:0 0 75px 0;*/
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 1%;
    border-style: solid; 
    border-width: 0px 0px 75px 0px;
    -moz-border-image: url(../img/vague.png) 0 0 75 stretch;
    -webkit-border-image: url(../img/vague.png) 0 0 75 stretch; 
    -o-border-image: url(../img/vague.png) 0 0 75 stretch; 
    border-image: url(../img/vague.png) 0 0 75 fill stretch; 
    animation-name: waving;
}
section.intro {
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-name: waving;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
@-moz-keyframes waving {
    0% {    -moz-border-image: url(../img/vague.png) 0 0 75 stretch;}
    50% {    -moz-border-image: url(../img/vague.png) 0 1603 75 stretch;}
    100% {    -moz-border-image: url(../img/vague.png) 0 0 75 stretch;}
}
@-webkit-keyframes waving {
    0% {    -webkit-border-image: url(../img/vague.png) 0 0 75 stretch;}
    50% {    -webkit-border-image: url(../img/vague.png) 0 1603 75 stretch;}
    100% {    -webkit-border-image: url(../img/vague.png) 0 0 75 stretch;}
} 
@keyframes waving {
    0% {    border-image: url(../img/vague.png) 0 0 75 fill stretch;}
    50% {    border-image: url(../img/vague.png) 0 1603 75 fill stretch;}
    100% {    border-image: url(../img/vague.png) 0 0 75 fill stretch;}
}

Answer 1

它在 Chrome 中对我有用，删除了 webkit 语法

CSS

section.intro {
/*  border-color:#06b4c8;*/
/*  border-style:solid;*/
/*  border-width:0 0 75px 0;*/
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 1%;
    border-style: solid; 
    border-width: 0px 0px 75px 0px;
    -moz-border-image: url(../img/vague.png) 0 0 75 stretch;
    -o-border-image: url(../img/vague.png) 0 0 75 stretch; 
  border-image: url(http://placekitten.com/200/50) 0 0 75 fill stretch;  
    animation-name: waving;

    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-name: waving;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
@-moz-keyframes waving {
    0% {    -moz-border-image: url(../img/vague.png) 0 0 75 stretch;}
    50% {    -moz-border-image: url(../img/vague.png) 0 1603 75 stretch;}
    100% {    -moz-border-image: url(../img/vague.png) 0 0 75 stretch;}
}
@-webkit-keyframes waving {
    0% { border-image-slice: 0 0 75;}
    50% {  border-image-slice: 0 20 75;}
    100% {   border-image-slice: 0 0 75;}
} 
@keyframes waving {
    0% {    border-image: url(../img/vague.png) 0 0 75 fill stretch;}
    50% {    border-image: url(../img/vague.png) 0 1603 75 fill stretch;}
    100% {    border-image: url(../img/vague.png) 0 0 75 fill stretch;}
}

fiddle

我还更改了要动画化的属性，以实现您真正要更改的内容(不是完整的边框图像)