html - How do I animate steam from a coffee cup in my SVG icon code? -
i'm graphic designer learning svg animated icons , coding. have illustrated cup of coffee in illustrator exported svg file. trying animate steam rises real steam. problem it's not animating steam if have .steam1 .st1 selected in css. might confused amount of tutorials i've been looking at. @ html code illustration , me animate using css based off of code http://codepen.io/anon/pen/dlmcn
here 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>
here's quick starting point based off of code: http://codepen.io/anon/pen/radom?editors=101
first, define keyframes animation:
@keyframes steaming { 0% { transform: translatey(0px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translatey(-10px); opacity: 0; } } @-webkit-keyframes { ... } the steam start off invisible (opacity: 0), fade in (opacity: 1) , out, moves up, determined translatey(-10px). note pixel values scaled according svg viewbox , height/width values.
then, apply these keyframes each of steam svg elements, using 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 animation speeds make bit better.
Comments
Post a Comment