SVG断路器/开关关闭动画

Question

我正在尝试设计一个断路器/开关，它可以关闭并打开某些事件。我使用SVG设计了断路器，并使用css动画和变换属性来设置它的闭合动画。

使用transform-origin：bottom但它不能按预期工作。请帮帮我以下是我的css代码：

.closeme {
    -webkit-animation-name: closeanimaton;
    -webkit-animation-duration: 3s; 
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: -1.5s;
    -webkit-animation-direction: alternate;
    -webkit-transform-origin: bottom;
    animation-name: closeanimaton;
    animation-duration: 3s; 
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-delay: -1.5s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    transform-origin: bottom;
    -moz-animation: none;
}

@-webkit-keyframes closeanimaton { 
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(35deg); }
}

@keyframes closeanimaton { 
    0% { transform: rotate(0deg); }
    100% { transform: rotate(35deg); }
}

这里是codepen链接，我有完整的代码，请随时编辑：

https://codepen.io/anon/pen/OQexEP

Answer 1

这可能不是你所要求的帮助，但我发现使用D3创建形状并为它们添加动画更容易。看看下面的我的片段。它可能会为您提供有关如何进行SVG动画的灵感。

var svg = d3.select('body').append("svg").attr("width",200).attr("height",150);
svg.style("background-color","black");



var part1 = svg.append("path").attr("d","M100,0 L100,30").attr("fill","none").attr("stroke","white");

var part2 = svg.append("path").attr("d","M100,80 L100,150").attr("fill","none").attr("stroke","white");

var moving_part = svg.append("g").attr("transform","translate(100,80) rotate(45)");

moving_part.append("path").attr("d","M0,0 L0,-50").attr("fill","none").attr("stroke","gold").attr("stroke-width",2);
moving_part.append("circle").attr("cy",-50).attr("r",5).attr("fill","gold");

moving_part.transition().delay(1000).duration(3000).attr("transform","translate(100,80) rotate(0)");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>