如何在SVG图标代码中为咖啡杯中的蒸汽设置动画?

时间:2014-09-10 20:33:44

标签: html css animation svg

我是一名平面设计师,只是在学习SVG动画图标和编码。我在插图画家中说明了一杯咖啡,然后将其导出为SVG文件。我试图让蒸汽动画,使它像真正的蒸汽一样升起。问题是,即使我在CSS中选择了.steam1 .st1,它也没有动画。我可能只是对我一直在关注的教程数量感到困惑。有人可以查看我的HTML代码以获取插图,并帮助我使用基于此代码的CSS http://codepen.io/anon/pen/DLmCn

正确地为其设置动画

以下是我在HTML http://codepen.io/anon/pen/niHCA

中的SVG代码
<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>

1 个答案:

答案 0 :(得分:6)

以下是基于代码的快速起点:http://codepen.io/anon/pen/rAdom?editors=101

首先,定义动画的关键帧:

@keyframes steaming {
    0% {
      transform: translateY(0px);
      opacity: 0;
    }

    50% { opacity: 1; }

    100% {
      transform: translateY(-10px);
      opacity: 0;
    }
}

@-webkit-keyframes {
 ...
}

蒸汽将从不可见(不透明度:0)开始,然后淡入(不透明度:1)并在向上移动时退出,由translateY(-10px)确定。请注意,像素值是根据SVG视图框和高度/宽度值缩放的。

然后,使用您设置的类将这些关键帧应用于每个Steam SVG元素:

.steam1{
  -webkit-animation: steaming 7s linear infinite;
  -moz-animation: steaming 7s linear infinite;
  animation: steaming 7s linear infinite;
}

您可以调整动画速度,使其看起来更好。