Krish
Reputation: 1894
SVG width attribute css animation in firefox
SVG width attribute css animation not working in Firefox but in chrome it working perfectly. Please check the below snippet demo.
Does any wrong in my codes? Is there a way to apply the animation over the attribute width?
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 " />
<!-- 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
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>Upvotes: 2
Views: 1176
Answers (2)
Robert Longson
Reputation: 124089
In SVG 1.1 width is an attribute and cannot be animated with CSS animation.
In the SVG 2 specification width is a CSS property which can therefore be animated with CSS animation.
Chrome has implemented this part of the SVG 2 specification, Firefox had not when this question was first written, but it has now. In fact Firefox has had this functionality for quite a while now.
Upvotes: 1
Alexandr_TT
Reputation: 14545
Consider using lines with a stroke-width equal to the height of the rectangles instead of rectangles in your animation.
The stroke-dasharray lines will be used for animation.
At
0% {stroke-dasharray: 0.10;}for an animated line equal to 10px the line will be hiddenAt 50% {stroke-dasharray: 10,0;} the line will be shown in full
At 100% {stroke-dasharray: 0.10;} the line will be hidden again
.glare-top {
-webkit-animation: glareAnim1 2s linear infinite;
stroke-dasharray:0,10;
animation: glareAnim1 2s linear infinite;
}
@-webkit-keyframes glareAnim1 {
0% {stroke-dasharray:0,10;}
50% {stroke-dasharray:10,10;}
100%{stroke-dasharray:0,10;}
}
.glare-bottom {
-webkit-animation: glareAnim2 2s linear infinite;
stroke-dasharray:0,10;
animation: glareAnim2 2s linear infinite;
}
@-webkit-keyframes glareAnim2 {
0% {stroke-dasharray:10,0;}
50% {stroke-dasharray:0,10;}
100%{stroke-dasharray:10,0;}
}<svg version="1.1" viewBox="0 0 100 120" >
<!-- left top wind -->
<polyline class="glare-top" points="27,28 37,28" stroke="#464949" stroke-width="2" />
<!-- left bottom wind -->
<polyline class="glare-bottom" points="27,33 37,33" stroke="#464949" stroke-width="2" />
</svg> I have shortened your code to show the basic animation of the lines and the door.
svg {
display: inline-block;
}
.glare-top {
-webkit-animation: glareAnim1 2s linear infinite;
stroke-dasharray:0,10;
animation: glareAnim1 2s linear infinite;
}
@-webkit-keyframes glareAnim1 {
0% {stroke-dasharray:0,10;}
50% {stroke-dasharray:10,10;}
100%{stroke-dasharray:0,10;}
}
@keyframes glareAnim1 {
0% {stroke-dasharray:0,10;}
50% {stroke-dasharray:10,10;}
100%{stroke-dasharray:0,10;}
}
.glare-bottom {
-moz-animation: glareAnim2 2s linear infinite;
-webkit-animation: glareAnim2 2s linear infinite;
stroke-dasharray:0,10;
animation: glareAnim2 2s linear infinite;
}
@-webkit-keyframes glareAnim2 {
0% {stroke-dasharray:10,0;}
50% {stroke-dasharray:0,10;}
100%{stroke-dasharray:10,0;}
}
@keyframes glareAnim2 {
0% {stroke-dasharray:10,0;}
50% {stroke-dasharray:0,10;}
100%{stroke-dasharray:10,0;}
}
.researchDoor {
fill: #464949;
stroke-dasharray:0,6;
animation: translateDoor 5s linear infinite;
}
@keyframes translateDoor {
0% {
transform: translate(-1px, 0);
opacity: 1;
stroke-dasharray:0,6;
}
15% {
stroke-dasharray:1.4,4.6;
}
50% {
transform: translate(8px, 0);
stroke-dasharray:5,1;
}
70% {
transform: translate(12.8px, 0);
stroke-dasharray:3.5,2.5;
}
100% {
transform: translateX(16px);
stroke-dasharray:0,6;
}
}
.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" viewBox="0 0 100 120" >
<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 " />
<!-- door -->
<!-- <rect x="41" y="28.9" class="researchDoor" /> -->
<polyline class="researchDoor" points="41,32 47,32" stroke="#464949" stroke-width="6" />
<!-- left top wind -->
<polyline class="glare-top" points="27,28 37,28" stroke="#464949" stroke-width="2" />
<!-- right top wind -->
<polyline class="glare-top" points=" 62,28 72,28" stroke="#464949" stroke-width="2" />
<!-- left bottom wind -->
<polyline class="glare-bottom" points="27,33 37,33" stroke="#464949" stroke-width="2" />
<!-- right bottom wind -->
<polyline class="glare-bottom" points=" 62,33 72,33" stroke="#464949" stroke-width="2" />
<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
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>Upvotes: 2
Related Questions
- How can I change the color of an 'svg' element?
- Change an HTML input's placeholder color with CSS
- How can I transition height: 0; to height: auto; using CSS?
- Is there a CSS parent selector?
- Transitions on the CSS display property
- What is the difference between margin and padding in CSS?
- How do I reduce the opacity of an element's background using CSS?
- Is it possible to apply CSS to half of a character?
- Set cellpadding and cellspacing in CSS?
- HTML: Valid id attribute values?