动画SVG路径元素

Question

I've got an SVG with a few paths inside. 我有一个带有一些内部路径的SVG。 I'd like to translate these paths about 100px down and have them fade out. 我想将这些路径向下平移约100px，并使其淡出。 I'm going to use Javascript to repeat this animation eventually. 我将最终使用Javascript重复此动画。 For now, I've created the CSS animations and appended the class to each element, but it doesn't seem to work. 现在，我已经创建了CSS动画并将该类附加到每个元素，但是似乎不起作用。 If I view in web inspector and toggle the translate property, the animation works as expected. 如果我在Web检查器中查看并切换了translate属性，则动画将按预期工作。 It doesn't seem to work on page load though. 虽然它似乎不适用于页面加载。

I might be approaching this wrong, I'd really appreciate a solution. 我可能正在解决这个错误，我真的很感激一个解决方案。

Here's a link to the code: 这是代码的链接：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Doomed</title>
    <style>
        body {
            background: #000;
        }
                    .st0 {
                fill: #FFFFFF;
            }
        .drop {
            display: block;
            position: relative;
            transition: all 2s ease-in-out;
            transform: translateY(0px);            
        }
        .drop.move {
            transition: all 2s ease-in-out;
            transform: translateY(50px);            
        }
    </style>
</head>
<body>
<svg version="1.1" id="umbrella_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 750 392" xml:space="preserve">
        <path id="umbrella_x5F_body" class="st0" d="M368.3,34.7c0.9-3.7,1.5-7.4,2.6-11.1c0.5-1.6,0.9-3.1,2-4.3c0.8-0.9,2-2,3.2-1.9
    c1.3,0.1,2.4,1.2,3.2,2.1c1,1.2,1.4,2.7,1.8,4.2c1.1,3.6,1.7,7.4,2.6,11.1c5.5,0.5,11.4,0.9,17.3,1.7c43.3,6,76.3,28.1,100.1,64.2
    c7.3,11,13.5,22.8,18.5,35c5,12.1,8.9,24.7,11.9,37.5c0.8,3.6,1.6,7.3,2.3,11c0.3,1.8,0.7,3.6,1,5.4c0.3,1.8,0.9,3.8,0.8,5.6
    c-0.1,3.6-1.7,6.6-5.6,6.8c-3.7,0.1-5.6-2.7-6-6.1c-0.6-5.1-1.3-10.3-2.9-15.2c-1.6-4.9-4.1-9.4-7.4-13.3
    c-5.9-7-13.7-12.2-22.5-14.7c-17.2-5-36.3,1-47.7,14.8c-6.2,7.5-9.8,16.8-10.3,26.5c-0.1,2,0,4.1-1.1,5.8c-0.9,1.4-2.3,2.1-3.8,2.2
    c-1.6,0.1-3.4-0.2-4.6-1.3c-1.3-1.1-1.8-2.9-1.8-4.5c-0.4-11.9-4.3-22.5-12.7-31.2c-7-7.3-15.5-11.9-26.4-13.5c0,2.3,0,4.2,0,6.1
    c0,65.1,0,130.3,0,195.4c0,2.2,0.6,4.8-0.3,6.4c-1.4,2.2-3.8,4.8-6.1,5.3c-2.2,0.5-4.3-0.6-5.4-2.6c-1.4-2.6-1-5.7-1-8.6
    c0-7.1,0-14.1,0-21.2c0-14,0-28.1,0-42.1c0-14.1,0-28.2,0-42.3c0-14,0-28.1,0-42.1c0-14.1,0-28.2,0-42.3c0-1.7,0-3.5,0-5.2
    c0-2,0-3.9,0-7.1c-4.5,1.4-8.6,2.3-12.2,4c-16.5,7.8-25.5,20.9-26.7,39.1c-0.1,1.9-0.3,3.9-1.3,5.6c-1.1,1.6-3,2.3-4.9,2.4
    c-4.3,0.1-5.3-4.6-5.5-8c-1.4-18.2-10.2-31.6-26.8-39c-16.2-7.3-31.9-5.2-46.2,5.4c-10.3,7.7-15.9,18.2-17.1,31
    c-0.2,1.8-0.5,3.6-0.8,5.4c-0.2,1.2-0.6,2.3-1.3,3.3c-1.5,1.9-4,2.2-6.2,1.6c-2.3-0.6-3.7-2.5-3.8-4.9c0-1.7,0.4-3.5,0.7-5.2
    c0.3-1.8,0.6-3.6,0.9-5.4c0.7-4.2,1.5-8.4,2.5-12.5c6-26,15.5-50.6,30.3-72.9c26.6-40.1,63.8-62.3,112.1-65.4
    C365,35.2,366.8,35.2,368.3,34.7C369.4,30,368,34.8,368.3,34.7z M424,164.7c0.5-3.9,0.9-7.8,1-11.7c0.8-23.1-0.4-46-9-67.8
    c-6.7-16.9-17.4-30.3-34.9-37c-2.5-1-6-1-8.5-0.1c-16.3,6-26.9,18-33.7,33.6c-10,22.8-11.6,47-10.5,71.5c0.1,3.2,0.5,6.5,0.8,10.2
    C354.4,130.8,400.3,132.3,424,164.7 M317.1,154.2c0.3-11.5,0-23,0.9-34.4c1.9-21.7,7.3-42.3,20.8-60c2.8-3.6,6-6.9,9.1-10.5
    C307.4,49,250,102.8,240.3,149.9c34.7-15.7,44.4-14.7,76.8,8.4 M436.5,157.5c23.7-21.4,48.8-23.7,75.8-7.5
    c-11.6-48.7-66.6-100.6-106.6-100.7C405.7,49.4,441.3,74,436.5,157.5z" />
        <path id="drop4" class="st0 drop" d="M489.5,201.3c1.9,7.5,4.2,15,5.4,22.6c0.7,4.4-0.9,11.5-6.5,11.7c-5.8,0.2-7.8-7.3-7-11.8
    c1.3-7.6,3.7-15,5.6-22.5C487.8,201.3,488.6,201.3,489.5,201.3C491.3,208.8,488.6,201.3,489.5,201.3z" />
        <path id="drop3" class="st0 drop" d="M441.6,244.8c1.8,7.8,4.1,15.6,5.2,23.5c0.4,3.1-0.3,6.5-2.6,8.7c-1.9,1.8-4.6,2.4-6.9,1.1
    c-2.6-1.5-4.1-4.5-4.2-7.4c-0.1-1.9,0.3-3.8,0.7-5.6c0.4-2.2,0.9-4.3,1.4-6.4c1.1-4.7,2.3-9.3,3.4-13.9
    C439.6,244.8,440.6,244.8,441.6,244.8C443.4,252.6,440.6,244.8,441.6,244.8z" />
        <path id="drop2" class="st0 drop" d="M340.3,231.5c1.3,5.9,2.7,11.9,4,17.8c0.3,1.4,0.6,2.8,0.9,4.3c0.3,1.6,0.7,2.9,0.3,4.4
    c-0.4,1.9-1,3.9-2.1,5.5c-2.4,3.2-7.6,2.9-9.8-0.4c-1.1-1.6-1.5-3.5-1.6-5.3c-0.2-2.8-0.1-5.5,0.4-8.3c1-6.1,3.5-11.8,5.7-17.6
    C338.9,231.7,339.6,231.6,340.3,231.5C342.2,239.6,339.6,231.6,340.3,231.5z" />
        <path id="drop1" class="st0 drop" d="M274.4,202.2c2.1,4.9,4.1,9.9,5.3,15.1c1.1,4.9,2.1,10.6-0.4,15.2c-1.8,3.3-5.8,5-9,2.2
    c-1.6-1.4-2.6-3.7-3.1-5.8c-0.5-2.5,0.3-5.2,0.9-7.7c1.3-6.4,2.9-12.8,4.3-19.2C273.1,202.1,273.7,202.2,274.4,202.2
    C277.7,210.2,273.7,202.2,274.4,202.2z" />
    </svg>
    <script>
        var drops = document.getElementsByClassName('drop');
            for (var i = 0; i < drops.length; i++) {
            //works
            console.log(drops[i]);
            drops[i].classList.add('move');
        }
        </script>
    </body>
</html>

Answer 1

Do you want to animate each drop separately? 是否要分别为每个液滴设置动画？ If not, I've setup an animation with animation property. 如果没有，我已经设置了带有animation属性的animation 。

Here is a snippet 这是一个片段

 body { background: #000; } .st0 { fill: #FFFFFF; } .drop { display: block; position: relative; animation: drop 2.5s; animation-iteration-count: infinite; } @keyframes drop { from { transform: translateY(0px); opacity: 1.0; } to { transform: translateY(50px); opacity: 0; } }

 <svg version="1.1" id="umbrella_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 750 392" xml:space="preserve"> <path id="umbrella_x5F_body" class="st0" d="M368.3,34.7c0.9-3.7,1.5-7.4,2.6-11.1c0.5-1.6,0.9-3.1,2-4.3c0.8-0.9,2-2,3.2-1.9 c1.3,0.1,2.4,1.2,3.2,2.1c1,1.2,1.4,2.7,1.8,4.2c1.1,3.6,1.7,7.4,2.6,11.1c5.5,0.5,11.4,0.9,17.3,1.7c43.3,6,76.3,28.1,100.1,64.2 c7.3,11,13.5,22.8,18.5,35c5,12.1,8.9,24.7,11.9,37.5c0.8,3.6,1.6,7.3,2.3,11c0.3,1.8,0.7,3.6,1,5.4c0.3,1.8,0.9,3.8,0.8,5.6 c-0.1,3.6-1.7,6.6-5.6,6.8c-3.7,0.1-5.6-2.7-6-6.1c-0.6-5.1-1.3-10.3-2.9-15.2c-1.6-4.9-4.1-9.4-7.4-13.3 c-5.9-7-13.7-12.2-22.5-14.7c-17.2-5-36.3,1-47.7,14.8c-6.2,7.5-9.8,16.8-10.3,26.5c-0.1,2,0,4.1-1.1,5.8c-0.9,1.4-2.3,2.1-3.8,2.2 c-1.6,0.1-3.4-0.2-4.6-1.3c-1.3-1.1-1.8-2.9-1.8-4.5c-0.4-11.9-4.3-22.5-12.7-31.2c-7-7.3-15.5-11.9-26.4-13.5c0,2.3,0,4.2,0,6.1 c0,65.1,0,130.3,0,195.4c0,2.2,0.6,4.8-0.3,6.4c-1.4,2.2-3.8,4.8-6.1,5.3c-2.2,0.5-4.3-0.6-5.4-2.6c-1.4-2.6-1-5.7-1-8.6 c0-7.1,0-14.1,0-21.2c0-14,0-28.1,0-42.1c0-14.1,0-28.2,0-42.3c0-14,0-28.1,0-42.1c0-14.1,0-28.2,0-42.3c0-1.7,0-3.5,0-5.2 c0-2,0-3.9,0-7.1c-4.5,1.4-8.6,2.3-12.2,4c-16.5,7.8-25.5,20.9-26.7,39.1c-0.1,1.9-0.3,3.9-1.3,5.6c-1.1,1.6-3,2.3-4.9,2.4 c-4.3,0.1-5.3-4.6-5.5-8c-1.4-18.2-10.2-31.6-26.8-39c-16.2-7.3-31.9-5.2-46.2,5.4c-10.3,7.7-15.9,18.2-17.1,31 c-0.2,1.8-0.5,3.6-0.8,5.4c-0.2,1.2-0.6,2.3-1.3,3.3c-1.5,1.9-4,2.2-6.2,1.6c-2.3-0.6-3.7-2.5-3.8-4.9c0-1.7,0.4-3.5,0.7-5.2 c0.3-1.8,0.6-3.6,0.9-5.4c0.7-4.2,1.5-8.4,2.5-12.5c6-26,15.5-50.6,30.3-72.9c26.6-40.1,63.8-62.3,112.1-65.4 C365,35.2,366.8,35.2,368.3,34.7C369.4,30,368,34.8,368.3,34.7z M424,164.7c0.5-3.9,0.9-7.8,1-11.7c0.8-23.1-0.4-46-9-67.8 c-6.7-16.9-17.4-30.3-34.9-37c-2.5-1-6-1-8.5-0.1c-16.3,6-26.9,18-33.7,33.6c-10,22.8-11.6,47-10.5,71.5c0.1,3.2,0.5,6.5,0.8,10.2 C354.4,130.8,400.3,132.3,424,164.7 M317.1,154.2c0.3-11.5,0-23,0.9-34.4c1.9-21.7,7.3-42.3,20.8-60c2.8-3.6,6-6.9,9.1-10.5 C307.4,49,250,102.8,240.3,149.9c34.7-15.7,44.4-14.7,76.8,8.4 M436.5,157.5c23.7-21.4,48.8-23.7,75.8-7.5 c-11.6-48.7-66.6-100.6-106.6-100.7C405.7,49.4,441.3,74,436.5,157.5z" /> <path id="drop4" class="st0 drop" d="M489.5,201.3c1.9,7.5,4.2,15,5.4,22.6c0.7,4.4-0.9,11.5-6.5,11.7c-5.8,0.2-7.8-7.3-7-11.8 c1.3-7.6,3.7-15,5.6-22.5C487.8,201.3,488.6,201.3,489.5,201.3C491.3,208.8,488.6,201.3,489.5,201.3z" /> <path id="drop3" class="st0 drop" d="M441.6,244.8c1.8,7.8,4.1,15.6,5.2,23.5c0.4,3.1-0.3,6.5-2.6,8.7c-1.9,1.8-4.6,2.4-6.9,1.1 c-2.6-1.5-4.1-4.5-4.2-7.4c-0.1-1.9,0.3-3.8,0.7-5.6c0.4-2.2,0.9-4.3,1.4-6.4c1.1-4.7,2.3-9.3,3.4-13.9 C439.6,244.8,440.6,244.8,441.6,244.8C443.4,252.6,440.6,244.8,441.6,244.8z" /> <path id="drop2" class="st0 drop" d="M340.3,231.5c1.3,5.9,2.7,11.9,4,17.8c0.3,1.4,0.6,2.8,0.9,4.3c0.3,1.6,0.7,2.9,0.3,4.4 c-0.4,1.9-1,3.9-2.1,5.5c-2.4,3.2-7.6,2.9-9.8-0.4c-1.1-1.6-1.5-3.5-1.6-5.3c-0.2-2.8-0.1-5.5,0.4-8.3c1-6.1,3.5-11.8,5.7-17.6 C338.9,231.7,339.6,231.6,340.3,231.5C342.2,239.6,339.6,231.6,340.3,231.5z" /> <path id="drop1" class="st0 drop" d="M274.4,202.2c2.1,4.9,4.1,9.9,5.3,15.1c1.1,4.9,2.1,10.6-0.4,15.2c-1.8,3.3-5.8,5-9,2.2 c-1.6-1.4-2.6-3.7-3.1-5.8c-0.5-2.5,0.3-5.2,0.9-7.7c1.3-6.4,2.9-12.8,4.3-19.2C273.1,202.1,273.7,202.2,274.4,202.2 C277.7,210.2,273.7,202.2,274.4,202.2z" /> </svg>

动画SVG路径元素

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-10-08 13:24:10

动画SVG路径元素

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-10-08 13:24:10

解决方案1
2 已采纳 2015-10-08 13:24:10