1
SVGの幅の属性CSSのアニメーションはFirefoxでは動作しませんが、クロムでは完全に動作します。下記のスニペットのデモをご覧ください。FirefoxのSVG幅属性CSSのアニメーション
私のコードは間違っていますか？アトリビュートの幅にアニメーションを適用する方法はありますか？ SVG 1.1の幅で
svg {
display: inline-block;
}
@-moz-keyframes glareAnim1 {
0% {
width: 0;
}
50% {
width: 10px;
}
100% {
width: 0;
}
}
@-webkit-keyframes glareAnim1 {
0% {
width: 0;
}
50% {
width: 10px;
}
100% {
width: 0;
}
}
@keyframes glareAnim1 {
0% {
width: 0;
}
50% {
width: 10px;
}
100% {
width: 0;
}
}
.glare-top {
-moz-animation: glareAnim1 2s linear infinite;
-webkit-animation: glareAnim1 2s linear infinite;
animation: glareAnim1 2s linear infinite;
}
@-moz-keyframes glareAnim2 {
0% {
width: 10px;
}
50% {
width: 0;
}
100% {
width: 10px;
}
}
@-webkit-keyframes glareAnim2 {
0% {
width: 10px;
}
50% {
width: 0;
}
100% {
width: 10px;
}
}
@keyframes glareAnim2 {
0% {
width: 10px;
}
50% {
width: 0;
}
100% {
width: 10px;
}
}
.glare-bottom {
-moz-animation: glareAnim2 2s linear infinite;
-webkit-animation: glareAnim2 2s linear infinite;
animation: glareAnim2 2s linear infinite;
}
@-moz-keyframes translateDoor {
0% {
-moz-transform: translate(-1px, 0);
transform: translate(-1px, 0);
opacity: 1;
width: 1px;
height: 6px;
}
15% {
width: 4px;
}
50% {
-moz-transform: translate(16px, 0);
transform: translate(16px, 0);
opacity: 1;
width: 2px;
}
51% {
opacity: 0;
}
100% {
-moz-transform: translateX(-10px);
transform: translateX(-10px);
opacity: 0;
}
}
@-webkit-keyframes translateDoor {
0% {
-webkit-transform: translate(-1px, 0);
transform: translate(-1px, 0);
opacity: 1;
width: 1px;
height: 6px;
}
15% {
width: 4px;
}
50% {
-webkit-transform: translate(16px, 0);
transform: translate(16px, 0);
opacity: 1;
width: 2px;
}
51% {
opacity: 0;
}
100% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
opacity: 0;
}
}
@keyframes translateDoor {
0% {
-moz-transform: translate(-1px, 0);
-ms-transform: translate(-1px, 0);
-webkit-transform: translate(-1px, 0);
transform: translate(-1px, 0);
opacity: 1;
width: 1px;
height: 6px;
}
15% {
width: 4px;
}
50% {
-moz-transform: translate(16px, 0);
-ms-transform: translate(16px, 0);
-webkit-transform: translate(16px, 0);
transform: translate(16px, 0);
opacity: 1;
width: 2px;
}
51% {
opacity: 0;
}
100% {
-moz-transform: translateX(-10px);
-ms-transform: translateX(-10px);
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
opacity: 0;
}
}
.researchDoor {
fill: #464949;
-moz-animation: translateDoor 5s linear infinite;
-webkit-animation: translateDoor 5s linear infinite;
animation: translateDoor 5s linear infinite;
}
.research0 {
fill: #FFFFFF;
stroke: #464949;
stroke-width: 2;
stroke-miterlimit: 10;
}
.research1 {
fill: #FCBD38;
overflow: hidden;
}
.research2 {
fill: #464949;
}
.research3 {
fill: none;
stroke: #464949;
stroke-width: 2;
stroke-linecap: square;
stroke-miterlimit: 10;
}<svg version="1.1" x="0px" y="0px" viewBox="0 0 100 120" style="enable-background:new 0 0 100 120;" xml:space="preserve">
<path id="XMLID_42_" class="research0" d="M57.9,25.5c-3-6.4-8.3-11.6-8.3-11.6c-5.1,5-8.3,11.5-8.3,11.5v5.8L57.7,32L57.9,25.5z" />
<g id="XMLID_40_">
<rect x="41.4" y="25.9" class="research1" width="16.3" height="11.5" />
<path class="research2" d="M56.7,26.9v9.5H42.4v-9.5H56.7 M58.7,24.9H40.4v13.5h18.3V24.9L58.7,24.9z" />
</g>
<polygon id="XMLID_43_" class="research3" points="33.5,85.2 40.8,37.7 58.8,37.7 66.2,85.2 \t " />
<!-- door -->
<rect x="41" y="28.9" class="researchDoor" />
<!-- left top wind -->
<rect x="30" class="glare-top" y="28" fill="#464949" width="14" height="2" />
<!-- left bottom wind -->
<rect x="30" class="glare-bottom" y="32" fill="#464949" width="14" height="2" />
<!-- right top wind -->
<rect x="62" y="28" class="glare-top" fill="#464949" width="14" height="2" />
<!-- right bottom wind -->
<rect x="62" y="32" class="glare-bottom" fill="#464949" width="14" height="2" />
<!--
<line id="glareLeftTop" class="research3" x1="36.6" y1="28.7" x2="32.8" y2="28.7"/>
<line id="glareLeftBottom" class="research3" x1="36.6" y1="33.3" x2="23.8" y2="33.3"/>
<line id="glareTopRight" class="research3" x1="62.9" y1="28.7" x2="66.6" y2="28.7"/>
<line id="glareTopBottom" class="research3" x1="62.9" y1="33.3" x2="75.6" y2="33.3"/>
-->
<line id="XMLID_2_" class="research3" x1="76.3" y1="85.3" x2="23.7" y2="85.3" />
<line id="XMLID_64_" class="research3" x1="60.7" y1="37.7" x2="38.8" y2="37.7" />
<line id="XMLID_70_" class="research3" x1="58.7" y1="44.3" x2="40.8" y2="44.3" />
<line id="XMLID_79_" class="research3" x1="60.2" y1="51.7" x2="39.3" y2="51.7" />
<line id="XMLID_80_" class="research3" x1="61.7" y1="61" x2="37.8" y2="61" />
<line id="XMLID_90_" class="research3" x1="63.5" y1="69.3" x2="36.8" y2="69.3" />
<g id="XMLID_49_">
<path class="research2" d="M49.8,76.2c1.5,0,2.8,1.2,2.8,2.8v5.2H47v-5.2C47,77.4,48.2,76.2,49.8,76.2 M49.8,74.2
\t \t \t c-2.6,0-4.8,2.1-4.8,4.8v7.2h9.5v-7.2C54.5,76.3,52.4,74.2,49.8,74.2L49.8,74.2z" />
</g>
</svg>
widthのデフォルト値はautoです。トランジションは数値間でのみアニメーションできます。 – Morpheus
あなたは例を挙げることができますか？ – Krish