How do I animate the steam from a cup of coffee in my SVG icon code?
I am a graphic designer just learning about SVG animated icons and coding. I illustrated a cup of coffee in illustrator and then exported it as an SVG file. I try to revive the steam so that it rises like real steam. The problem is it doesn't animate the steam even though I have .steam1.st1 selected in CSS. I might just be confused by the amount of tutorials I have looked at. Can anyone take a look at my HTML for illustration and help me animate it correctly using CSS based on this code http://codepen.io/anon/pen/DLmCn
Here is my SVG code in HTML http://codepen.io/anon/pen/niHCA
<body>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="icon"
width="284px" height="284px" viewBox="0 0 64 64"
style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill:#49331B;}
.st1{fill:#E6E7E8;}
.st2{opacity:0.8;fill:url(#SVGID_4_);}
.st3{opacity:0.8;fill:url(#SVGID_5_);}
.st4{fill:#F3E8C3;stroke:#F3E8C3;stroke-width:0.9486;stroke-miterlimit:10;}
.st5{fill:none;stroke:#FFFFFF;stroke-width:0.4743;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st6{fill:#F3E8C3;}
.st7{fill:#F4EFE9;}
.st8{fill:#F79F63;}
.st9{fill:url(#SVGID_1_);}
.st10{fill:url(#SVGID_3_);}
.st11{opacity:0.7;}
.st12{fill:#307BA5;}
.st13{fill:#328AC6;}
.st14{fill:none;stroke:#E2D5B7;stroke-width:0.9486;stroke-miterlimit:10;}
.st15{opacity:0.5;fill:url(#SVGID_2_);}
.st16{opacity:0.5;fill:url(#SVGID_6_);}
.st17{fill:#77593D;}
]]>
</style>
<rect x="0.1" class="st8" width="64" height="64"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="10.5957" y1="55.7451" x2="45.3627" y2="53.0889">
<stop offset="0" style="stop-color:#F79F63"/>
<stop offset="5.723715e-03" style="stop-color:#F49E63"/>
<stop offset="0.1092" style="stop-color:#D88B57"/>
<stop offset="0.2279" style="stop-color:#C77F4F"/>
<stop offset="0.3712" style="stop-color:#BB7849"/>
<stop offset="0.5626" style="stop-color:#B47347"/>
<stop offset="1" style="stop-color:#B27246"/>
</linearGradient>
<path class="st9" d="M45.4,54.4c0-0.4-0.3-0.9-0.8-1.3c-2.2-1.7-8.8-2.9-16.6-2.9c-9.6,0-17.4,1.8-17.4,4.1c0,2.3,7.8,4.1,17.4,4.1
C37.6,58.5,45.4,56.7,45.4,54.4z"/>
<path class="st6" d="M43.8,32.9c3.5,0,6.4,3,6.4,6.7s-2.9,6.7-6.4,6.7 M44,49.9c5.4,0,9.8-4.6,9.8-10.3S49.4,29.2,44,29.2"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="43.7656" y1="39.6279" x2="51.1113" y2="39.6279">
<stop offset="0" style="stop-color:#F3E8C3"/>
<stop offset="0.5114" style="stop-color:#F0E5BF"/>
<stop offset="0.6956" style="stop-color:#E6DBB6"/>
<stop offset="0.8269" style="stop-color:#D8CCA7"/>
<stop offset="0.9323" style="stop-color:#C6BA93"/>
<stop offset="1" style="stop-color:#B6AA83"/>
</linearGradient>
<path class="st15" d="M43.9,46.8c4.3,0,7.2-2.5,7.2-7.2s-3.1-7-7.3-7l1.6,0.6c2.8,0.7,4.8,3.4,4.8,6.5s-1.9,5.7-4.8,6.5"/>
<path class="st4" d="M45,22.7c0-1.8-6.2-3.3-13.8-3.3s-13.8,1.5-13.8,3.3v31.4V54c0,1.8,6.2,3.3,13.8,3.3S45,55.8,45,54v0.1V22.7z"
/>
<ellipse class="st0" cx="31.2" cy="22.7" rx="13.3" ry="2.6"/>
<path class="st5" d="M27.8,21.4"/>
<path class="st5" d="M21.5,22.4"/>
<path class="st17" d="M33.9,20.8c5.5,0,8.9,0.8,8.9,1.9c0,0.5-1,1-2.6,1.3C40.2,24,48,21.9,33.9,20.8z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="18.9062" y1="21.7559" x2="32.2139" y2="22.6411">
<stop offset="0" style="stop-color:#382717"/>
<stop offset="1" style="stop-color:#49331B"/>
</linearGradient>
<path class="st10" d="M22,24.6c0,0-3.8-3.2,14.2-4.4c0,0-9.2-0.8-15.7,0.9c0,0-4,0.9-2.1,2.3C18.4,23.4,20.1,24.3,22,24.6z"/>
<path class="st14" d="M45,22.5c0,1.8-6.2,3.3-13.8,3.3s-13.8-1.5-13.8-3.3"/>
<path class="st14" d="M45,22.7c0-1.8-6.2-3.3-13.8-3.3s-13.8,1.5-13.8,3.3"/>
<g>
<path class="st7" d="M40.3,24.9c0,0-0.3,0.1-0.8,0.2c-0.5,0.1-1.2,0.3-2,0.4c-0.9,0.1-1.9,0.3-2.9,0.3C33.5,26,32.3,26,31.2,26
c-1.2-0.1-2.3-0.1-3.4-0.2c-0.5,0-1.1-0.1-1.6-0.1c-0.5-0.1-1-0.2-1.4-0.2c-1.7-0.3-2.8-0.6-2.8-0.6s1.2,0.1,2.9,0.3
c0.4,0,0.9,0.1,1.4,0.2c0.5,0,1,0,1.6,0c1.1,0,2.2,0.1,3.4,0.1c1.1,0,2.3,0,3.4-0.1c0.5,0,1.1-0.1,1.5-0.1c0.5,0,1-0.1,1.4-0.1
c0.4,0,0.8-0.1,1.2-0.1c0.3,0,0.7-0.1,0.9-0.1C40.1,25,40.3,24.9,40.3,24.9z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="45.3652" y1="31.4702" x2="46.6709" y2="31.4702">
<stop offset="0" style="stop-color:#B6AA83"/>
<stop offset="0.2623" style="stop-color:#BEB28B"/>
<stop offset="0.6699" style="stop-color:#D6CAA4"/>
<stop offset="1" style="stop-color:#F3E8C3"/>
</linearGradient>
<path class="st2" d="M45.4,29.3c0,0,1.1,0.2,1.3,0.3v4c0,0-0.9-0.4-1.3-0.5V29.3z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="45.3652" y1="47.7295" x2="46.5889" y2="47.7295">
<stop offset="0" style="stop-color:#B6AA83"/>
<stop offset="0.2623" style="stop-color:#BEB28B"/>
<stop offset="0.6699" style="stop-color:#D6CAA4"/>
<stop offset="1" style="stop-color:#F3E8C3"/>
</linearGradient>
<path class="st3" d="M45.4,49.9c0,0,0.5-0.1,1.2-0.4v-3.9c0,0-0.3,0.2-1.2,0.5V49.9z"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="17.4443" y1="39.4248" x2="31.32" y2="41.6584">
<stop offset="0" style="stop-color:#787157"/>
<stop offset="9.336331e-02" style="stop-color:#837B5F"/>
<stop offset="0.2765" style="stop-color:#A09674"/>
<stop offset="0.3167" style="stop-color:#A79C79"/>
<stop offset="0.6669" style="stop-color:#CDC29E"/>
<stop offset="1" style="stop-color:#F3E8C3"/>
</linearGradient>
<path class="st16" d="M32.8,26.3l-6.2,31.3c0,0-9-0.4-9.6-3.5l0-31.6C17,22.5,16.1,26.2,32.8,26.3z"/>
<g>
<g>
<path class="st12" d="M22.9,41.4c0,0,0,0.1,0,0.1c0,0.1,0,0.1,0,0.2c0,0.1-0.1,0.2-0.1,0.3c0,0.1-0.1,0.2-0.2,0.3
c-0.1,0.1-0.2,0.1-0.3,0.2s-0.3,0.1-0.5,0.1c-0.2,0-0.4-0.1-0.5-0.2c-0.1-0.1-0.2-0.2-0.3-0.2c-0.1-0.1-0.1-0.2-0.1-0.3
c0-0.1-0.1-0.2-0.1-0.3c0-0.1,0-0.2,0-0.2c0-0.1,0-0.1,0-0.1c0.1-0.8,0.1-1.5,0.2-2.3c0-0.2,0.1-0.4,0.2-0.6
c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.1,0.2-0.1,0.3-0.2c0.1,0,0.2-0.1,0.4,0c0.1,0,0.2,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2
c0.1,0.1,0.2,0.2,0.2,0.4c0,0.2,0.1,0.3,0.1,0.5c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.1c-0.1,0-0.2,0-0.2-0.1
c-0.1-0.1-0.1-0.2-0.1-0.3c0-0.1,0-0.2,0-0.3c0-0.1-0.1-0.1-0.1-0.2c0,0-0.1-0.1-0.1-0.1c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0
c0,0-0.1,0-0.1,0.1c0,0-0.1,0.1-0.1,0.1s-0.1,0.1-0.1,0.3c-0.1,0.8-0.1,1.5-0.2,2.3c0,0,0,0,0,0c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1
c0,0,0,0.1,0,0.1c0,0,0,0.1,0.1,0.1c0,0,0,0,0.1,0.1c0,0,0.1,0,0.2,0.1c0.1,0,0.2,0,0.2,0c0,0,0.1,0,0.1-0.1
c0.1-0.1,0.1-0.1,0.1-0.2c0-0.1,0-0.1,0-0.2c0,0,0,0,0-0.1c0,0,0-0.1,0-0.1c0,0,0.1-0.1,0.1-0.1s0.1-0.1,0.2-0.1
c0.1,0,0.1,0,0.2,0.1c0,0,0.1,0.1,0.1,0.1C22.9,41.3,22.9,41.3,22.9,41.4z"/>
<path class="st12" d="M25.9,41.6c0,0,0,0.1,0,0.1c0,0.1,0,0.1,0,0.2c0,0.1-0.1,0.2-0.1,0.3c0,0.1-0.1,0.2-0.2,0.3
c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.3,0.1-0.5,0.1s-0.4-0.1-0.5-0.1c-0.1-0.1-0.2-0.2-0.3-0.2c-0.1-0.1-0.1-0.2-0.2-0.3
s-0.1-0.2-0.1-0.3c0-0.1,0-0.2,0-0.2c0-0.1,0-0.1,0-0.1c0.1-0.8,0.1-1.5,0.2-2.3c0-0.2,0.1-0.4,0.1-0.6c0.1-0.1,0.2-0.3,0.2-0.3
c0.2-0.2,0.4-0.3,0.7-0.2c0.1,0,0.2,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2s0.2,0.2,0.2,0.4c0.1,0.2,0.1,0.3,0.1,0.5
C26,40,25.9,40.8,25.9,41.6z M25.1,42C25.1,41.9,25.1,41.9,25.1,42c0.1-0.1,0.1-0.2,0.1-0.2s0-0.1,0-0.1c0,0,0-0.1,0-0.1
c0,0,0,0,0,0c0-0.8,0.1-1.6,0.1-2.3c0-0.1,0-0.2,0-0.3c0-0.1-0.1-0.1-0.1-0.2c0,0-0.1-0.1-0.1-0.1c0,0-0.1,0-0.1,0
c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0.1c0,0-0.1,0.1-0.1,0.1c0,0.1-0.1,0.2-0.1,0.3c0,0.8-0.1,1.5-0.1,2.3c0,0,0,0,0,0c0,0,0,0,0,0.1
s0,0.1,0,0.1c0,0,0,0.1,0,0.1c0,0,0,0.1,0.1,0.1c0,0,0,0,0.1,0.1c0,0,0.1,0,0.2,0C24.9,42.1,25,42.1,25.1,42
C25.1,42,25.1,42,25.1,42z"/>
<path class="st12" d="M29,42.3c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.1c-0.5,0-1,0-1.5,0
c-0.1,0-0.2,0-0.2-0.1c-0.1-0.1-0.1-0.2-0.1-0.3c0.1-1.3,0.1-2.6,0.2-4c0-0.1,0-0.2,0.1-0.3c0.1-0.1,0.1-0.1,0.2-0.1
c0.1,0,0.2,0,0.2,0.1c0.1,0.1,0.1,0.2,0.1,0.3c0,1.2-0.1,2.4-0.1,3.6c0.4,0,0.8,0,1.1,0C28.8,42.2,28.9,42.2,29,42.3z"/>
<path class="st13" d="M32.3,42.3c0.1,0.1,0.1,0.2,0.1,0.3s0,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.1c-0.5,0-1,0-1.5,0
c-0.1,0-0.2,0-0.2-0.1c-0.1-0.1-0.1-0.2-0.1-0.3c0-1.3,0-2.6,0-4c0-0.1,0-0.2,0.1-0.3c0.1-0.1,0.1-0.1,0.2-0.1
c0.1,0,0.2,0,0.2,0.1c0.1,0.1,0.1,0.2,0.1,0.3c0,1.2,0,2.4,0,3.6c0.4,0,0.8,0,1.1,0C32.1,42.2,32.2,42.2,32.3,42.3z"/>
<path class="st13" d="M35.4,42.2c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.1c-0.5,0-0.9,0-1.4,0
c-0.1,0-0.2,0-0.2-0.1c-0.1-0.1-0.1-0.2-0.1-0.3c0-1.3-0.1-2.6-0.1-4c0-0.1,0-0.2,0.1-0.3s0.1-0.1,0.2-0.1c0.4,0,0.9,0,1.3,0
c0.1,0,0.2,0,0.2,0.1c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.1c-0.3,0-0.7,0-1,0c0,0.5,0,1,0,1.5
c0.2,0,0.5,0,0.7,0c0.1,0,0.2,0,0.2,0.1c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.1
c-0.2,0-0.5,0-0.7,0c0,0.3,0,0.7,0,1c0.3,0,0.7,0,1,0C35.3,42.1,35.3,42.2,35.4,42.2z"/>
<path class="st13" d="M38.6,41.6c0,0.1,0,0.1,0,0.2c0,0.1,0,0.2-0.1,0.3c0,0.1-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0.2-0.3,0.2
c-0.1,0.1-0.3,0.1-0.5,0.1c-0.2,0-0.4,0-0.5-0.1c-0.1-0.1-0.2-0.1-0.3-0.2c-0.1-0.1-0.1-0.2-0.2-0.3c0-0.1-0.1-0.2-0.1-0.3
c0-0.1,0-0.2,0-0.2s0-0.1,0-0.1c0-0.8-0.1-1.5-0.1-2.3c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.1-0.3,0.2-0.4c0.2-0.2,0.4-0.3,0.7-0.3
c0.3,0,0.5,0.1,0.7,0.2c0.1,0.1,0.2,0.2,0.2,0.3c0.1,0.1,0.1,0.3,0.2,0.6c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.1
c-0.1,0-0.2,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.3c0-0.1,0-0.2,0-0.2c0-0.1-0.1-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c0,0-0.1,0-0.1,0
c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0.1c0,0-0.1,0.1-0.1,0.2c0,0.1,0,0.2,0,0.3c0,0.8,0.1,1.6,0.1,2.3c0,0,0,0,0,0c0,0,0,0,0,0.1
c0,0,0,0.1,0,0.1s0,0.1,0,0.1c0,0,0,0.1,0.1,0.1c0,0,0,0,0.1,0.1c0,0,0.1,0,0.2,0c0.1,0,0.2,0,0.2-0.1c0,0,0.1,0,0.1-0.1
c0,0,0-0.1,0.1-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0,0,0,0,0,0c0-0.2,0-0.4,0-0.6c-0.1,0-0.2,0-0.2,0
c-0.1,0-0.2,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2c0-0.1,0-0.2,0.1-0.3c0.1-0.1,0.1-0.1,0.2-0.1c0.3,0,0.6,0,0.9-0.1
c0,0.4,0.1,0.9,0.1,1.3C38.6,41.5,38.6,41.5,38.6,41.6z"/>
<path class="st13" d="M41.6,41.8c0.1,0.1,0.1,0.1,0.1,0.2c0,0.1,0,0.2-0.1,0.3s-0.1,0.1-0.2,0.1c-0.5,0-0.9,0.1-1.4,0.1
c-0.1,0-0.2,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2c-0.1-1.3-0.2-2.6-0.3-4c0-0.1,0-0.2,0.1-0.3c0.1-0.1,0.1-0.1,0.2-0.1
c0.4,0,0.9-0.1,1.3-0.1c0.1,0,0.2,0,0.2,0.1c0.1,0.1,0.1,0.1,0.1,0.2c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.1
c-0.3,0-0.7,0.1-1,0.1c0,0.5,0.1,1,0.1,1.5c0.2,0,0.5,0,0.7-0.1c0.1,0,0.2,0,0.2,0.1c0.1,0.1,0.1,0.1,0.1,0.2c0,0.1,0,0.2-0.1,0.3
c-0.1,0.1-0.1,0.1-0.2,0.1c-0.2,0-0.5,0-0.7,0.1c0,0.3,0.1,0.7,0.1,1c0.3,0,0.7-0.1,1-0.1C41.4,41.7,41.5,41.8,41.6,41.8z"/>
</g>
</g>
<g class="steam1">
<path class="st1" d="M39.1,20.8c0,0-0.2-0.1-0.6-0.3c-0.2-0.1-0.4-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.8-0.7c-0.2-0.3-0.5-0.6-0.7-1
c-0.2-0.4-0.4-0.9-0.5-1.4c0-0.3,0-0.5-0.1-0.8c0-0.3,0.1-0.5,0.1-0.8c0.1-0.3,0.1-0.5,0.2-0.7c0.1-0.3,0.2-0.5,0.3-0.7
c0.5-0.9,1.1-1.7,1.7-2.4c0.3-0.4,0.5-0.7,0.8-1.1c0.2-0.3,0.4-0.7,0.5-1c0.1-0.3,0.2-0.6,0.2-0.9c0.1-0.3,0-0.5,0-0.7
C39.7,7.2,39.6,7,39.6,7s0,0.1,0.1,0.2c0,0.1,0.2,0.3,0.2,0.5c0.1,0.2,0.2,0.5,0.2,0.8c0,0.3,0,0.7-0.1,1.1
c-0.2,0.8-0.6,1.6-1.1,2.4c-0.5,0.8-1.1,1.6-1.6,2.4c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.2-0.2,0.5-0.2,0.6c0,0.2-0.1,0.4-0.1,0.6
c0,0.2,0,0.4,0,0.6c0.1,0.4,0.1,0.8,0.3,1.2c0,0.2,0.2,0.4,0.2,0.5c0.1,0.2,0.2,0.3,0.3,0.5c0.4,0.6,0.8,1.1,1.1,1.4
C38.9,20.6,39.1,20.8,39.1,20.8z"/>
</g>
<g class="steam2">
<path class="st1" d="M25.9,17.9c0,0-0.2-0.1-0.6-0.3c-0.2-0.1-0.4-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.8-0.7c-0.3-0.3-0.5-0.6-0.7-1
c-0.2-0.4-0.4-0.9-0.5-1.4c0-0.3,0-0.5-0.1-0.8c0-0.3,0.1-0.5,0.1-0.8c0.1-0.3,0.1-0.5,0.2-0.7c0.1-0.3,0.2-0.5,0.3-0.7
c0.5-0.9,1.1-1.7,1.7-2.4c0.3-0.4,0.5-0.7,0.7-1.1c0.2-0.3,0.4-0.7,0.5-1c0.1-0.3,0.2-0.6,0.2-0.9c0.1-0.3,0-0.5,0-0.7
c-0.1-0.4-0.1-0.7-0.1-0.7s0,0.1,0.1,0.2c0,0.1,0.2,0.3,0.2,0.5c0.1,0.2,0.2,0.5,0.2,0.8c0,0.3,0,0.7-0.1,1.1
c-0.2,0.8-0.6,1.6-1.1,2.4c-0.5,0.8-1.1,1.6-1.6,2.4c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.2-0.2,0.5-0.2,0.6c0,0.2-0.1,0.4-0.1,0.6
c0,0.2,0,0.4,0,0.6c0.1,0.4,0.1,0.8,0.3,1.2c0,0.2,0.2,0.4,0.2,0.5c0.1,0.2,0.2,0.3,0.3,0.5c0.4,0.6,0.8,1.1,1.1,1.4
C25.8,17.7,25.9,17.9,25.9,17.9z"/>
</g>
<g class="steam3">
<path class="st1" d="M32.5,22.5c0,0-0.2-0.1-0.6-0.3c-0.2-0.1-0.4-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.8-0.7c-0.3-0.3-0.5-0.6-0.7-1
c-0.2-0.4-0.4-0.9-0.5-1.4c0-0.3,0-0.5-0.1-0.8c0-0.3,0.1-0.5,0.1-0.8c0.1-0.3,0.1-0.5,0.2-0.7c0.1-0.3,0.2-0.5,0.3-0.7
c0.5-0.9,1.1-1.7,1.7-2.4c0.3-0.4,0.5-0.7,0.7-1.1c0.2-0.3,0.4-0.7,0.5-1c0.1-0.3,0.2-0.6,0.2-0.9c0.1-0.3,0-0.5,0-0.7
C33.1,8.9,33,8.7,33,8.7s0,0.1,0.1,0.2c0,0.1,0.2,0.3,0.2,0.5c0.1,0.2,0.2,0.5,0.2,0.8c0,0.3,0,0.7-0.1,1.1
c-0.2,0.8-0.6,1.6-1.1,2.4c-0.5,0.8-1.1,1.6-1.6,2.4c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.2-0.2,0.5-0.2,0.6c0,0.2-0.1,0.4-0.1,0.6
c0,0.2,0,0.4,0,0.6c0.1,0.4,0.1,0.8,0.3,1.2c0,0.2,0.2,0.4,0.2,0.5c0.1,0.2,0.2,0.3,0.3,0.5c0.4,0.6,0.8,1.1,1.1,1.4
C32.3,22.3,32.5,22.5,32.5,22.5z"/>
</g>
</svg>
<script type="text/javascript" src="prefixfree.min.js"></script>
</body>
+3
source to share
1 answer
This is where the starting point of your code starts quickly: http://codepen.io/anon/pen/rAdom?editors=101
First, define the keyframes for your animation:
@keyframes steaming {
0% {
transform: translateY(0px);
opacity: 0;
}
50% { opacity: 1; }
100% {
transform: translateY(-10px);
opacity: 0;
}
}
@-webkit-keyframes {
...
}
The steam will start invisible (opacity: 0), then fade out (opacity: 1) and retreat as it moves up, as defined by translateY (-10px). Note that the pixel values are scaled according to the SVG representation and the height / width values.
Then, apply these keyframes to each of the SVG elements in the pair using the classes you've set:
.steam1{
-webkit-animation: steaming 7s linear infinite;
-moz-animation: steaming 7s linear infinite;
animation: steaming 7s linear infinite;
}
You can adjust the speed of the animation to make it look a little better.
+5
source to share