Question

我有一个内部有几条路径的SVG。我想将这些路径翻译成大约100px并让它们淡出。我将最终使用Javascript重复此动画。现在，我已经创建了CSS动画并将类附加到每个元素，但它似乎不起作用。如果我在Web检查器中查看并切换translate属性，则动画将按预期工作。它似乎不适用于页面加载。

我可能正在接近这个错误，我真的很感激解决方案。

这是代码的链接：

<!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

你想分别为每一滴动画制作动画吗？如果没有，我设置了一个animation属性的动画。

这是一个代码段

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

动画SVG路径元素

1 个答案: