0

border-imageaの下部にある aをアニメーション化しようとして<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;}
}
4

1 に答える 1

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;}
}

フィドル

また、プロパティを実際に変更しているものにアニメーション化するように変更しました（完全な境界線画像ではありません）

于 2013-11-08T21:17:50.277 に答える