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

我还将属性更改为动画为你真正改变的（不是完整的边框图像）

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

1 个答案:

fiddle