Question

我有一个带箭头的SVG指南针。我希望能够向箭头添加一个类并让它旋转一定程度然后保持在那里并摆动。旋转和摆动工作不在一起。不知道如何将两者结合起来以便它们协同工作。这是我的代码：

＆＃13;

div {
  max-width: 40%;
}

.st0 {
  fill: none;
  stroke: #505050;
  stroke-width: 4.11;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.st1 {
  fill: none;
  stroke: #808080;
  stroke-width: 2.57;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.st2 {
  fill: #505050;
}

.st3 {
  opacity: 0.5;
}

.st4 {
  fill: none;
}


/* Fill Colors */

.green {
  fill: rgba(21, 255, 0, 0.5);
}

.dgreen {
  fill: rgba(12, 140, 0, 0.5);
}

.red {
  fill: rgba(255, 42, 0, 0.5);
}

.dred {
  fill: rgba(140, 23, 0, 0.5);
}


/* Arrow */

#arrow {
  transform-origin: 50% 59.7%;
  animation-name: wiggle;
  animation-duration: 1s;
  animation-fill-mode: forward;
  -webkit-animation-fill-mode: forward;
  -webkit-animation-iteration-count: infinite;
  /* Safari 4.0 - 8.0 */
  animation-iteration-count: infinite;
}


/* Rotations */

.north#arrow {
  -webkit-transform: rotate(45deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
}

.northEast#arrow {
  -webkit-transform: rotate(90deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
}

.west#arrow {
  -webkit-transform: rotate(135deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
}

.southWest#arrow {
  -webkit-transform: rotate(180deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
}

.south#arrow {
  -webkit-transform: rotate(225deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
}

.southWest#arrow {
  -webkit-transform: rotate(270deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
}

.west#arrow {
  -webkit-transform: rotate(315deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
}

.northWest#arrow {
  -webkit-transform: rotate(0deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
}


/* Wiggle Animation */


/* safari and chrome */

@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: rotate(4deg);
  }
  50% {
    -webkit-transform: rotate(-4deg);
  }
  100% {
    -webkit-transform: rotate(4deg);
  }
}


/* firefox */

@-moz-keyframes wiggle {
  0% {
    -moz-transform: rotate(4deg);
  }
  50% {
    -moz-transform: rotate(-4deg);
  }
  100% {
    -moz-transform: rotate(4deg);
  }
}

@keyframes wiggle {
  0% {
    transform: rotate(4deg);
  }
  50% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(4deg);
  }
}

＆＃13;

<div>
  <?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <svg version="1.1" id="Layer_4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 116.3 144" style="enable-background:new 0 0 116.3 144;" xml:space="preserve">
    
    <title>compass</title>
    <line id="N" class="st0" x1="58.2" y1="31.3" x2="58.2" y2="49.6"/>
    <line id="NW" class="st1" x1="18.5" y1="46.1" x2="31.4" y2="59"/>
    <line id="W" class="st0" x1="3.6" y1="85.7" x2="21.9" y2="85.7"/>
    <line id="SW" class="st1" x1="18.3" y1="125.5" x2="31.3" y2="112.5"/>
    <line id="S" class="st0" x1="58" y1="140.3" x2="58" y2="122"/>
    <line id="SE" class="st1" x1="97.7" y1="125.6" x2="84.8" y2="112.6"/>
    <line id="E" class="st0" x1="113.4" y1="85.9" x2="95.1" y2="85.9"/>
    <line id="NE" class="st1" x1="97.8" y1="46.2" x2="84.9" y2="59.1"/>
    <path id="compass" class="st2" d="M69.6,28.8c6.7-6.3,7-16.9,0.7-23.6s-16.9-7-23.6-0.7s-7,16.9-0.7,23.6c0.2,0.2,0.4,0.5,0.7,0.7
    	c-31.5,6.3-51.9,37-45.6,68.5s37,51.9,68.5,45.6c31.5-6.3,51.9-37,45.6-68.5C110.6,51.4,92.6,33.4,69.6,28.8z M58.2,6.5
    	c5.6,0,10.2,4.6,10.2,10.2H48C48,11.1,52.6,6.5,58.2,6.5z M58.2,138.3c-29,0-52.5-23.5-52.5-52.5s23.5-52.5,52.5-52.5
    	c29,0,52.5,23.5,52.5,52.5c0,0,0,0,0,0C110.6,114.8,87.1,138.3,58.2,138.3z"/>
    <path id="inner_compass" class="st2" d="M58.2,130.8c-24.9,0-45.2-20.2-45.2-45.2s20.2-45.2,45.2-45.2c24.9,0,45.2,20.2,45.2,45.1
    	c0,0,0,0,0,0C103.3,110.6,83.1,130.8,58.2,130.8z M58.2,43.8c-23.1,0-41.9,18.8-41.9,41.9s18.8,41.9,41.9,41.9s41.9-18.8,41.9-41.9
    	C100.1,62.6,81.3,43.8,58.2,43.8L58.2,43.8z"/>
    <g id="NNW" class="st3">
    	<path id="nnwPie" class="st4 green" d="M57.9,27.7v58.2l-41-41C27.8,33.9,42.5,27.7,57.9,27.7z"/>
    </g>
    <g id="WNW" class="st3">
    	<path id="wnwPie" class="st4 dgreen" d="M57.9,85.8H0.2v-0.2c0-15.3,6-30,16.8-40.8L57.9,85.8z"/>
    </g>
    <g id="WSW">
    	<path id="wswPie" class="st4" d="M57.9,85.8l-40.8,40.8c-10.8-10.8-16.9-25.5-17-40.8H57.9z"/>
    </g>
    <g id="SSW">
    	<path id="sswPie" class="st4" d="M57.9,85.8v57.8c-15.3,0-30-6.2-40.8-17L57.9,85.8z"/>
    </g>
    <g id="SSE">
    	<path id="ssePie" class="st4 red" d="M99,126.9c-10.8,10.8-25.5,16.8-40.8,16.8H58V85.8L99,126.9z"/>
    </g>
    <g id="ESE">
    	<path id="esePie" class="st4 dred" d="M116.2,85.8c0,15.4-6.2,30.2-17.2,41l-41-41H116.2z"/>
    </g>
    <g id="ENE">
    	<path id="enePie" class="st4" d="M116.2,85.7v0.2H57.9l41.2-41.2C110.1,55.5,116.2,70.3,116.2,85.7z"/>
    </g>
    <g id="NNE">
    	<path id="nnePie" class="st4" d="M99.1,44.6L57.9,85.8V27.7h0.2C73.5,27.6,88.3,33.7,99.1,44.6z"/>
    </g>
    <polygon id="arrow" class="st2 west" points="78.4,105.3 80.2,107.1 79.1,108.3 77.2,106.4 75.5,109.7 74.1,108.6 75.9,105.1 75.1,104.3 
    	73.3,107.7 71.9,106.6 73.8,103 72.9,102.1 71.2,105.6 69.8,104.5 71.7,100.9 63.5,92.7 63.5,92.7 41.5,70.7 41.4,70.8 39,74.3 
    	34.5,62.5 46.3,67.1 42.5,69.5 64.6,91.6 65.2,92.1 72.9,99.8 76.5,98 77.6,99.5 74.1,101.1 74.9,101.9 78.6,100 79.7,101.4 
    	76.2,103.1 75.9,102.9 77.1,104 80.8,102.3 81.9,103.8 "/>
    </svg>
</div>

＆＃13;

Answer 1

您需要将动画链接在一起并在它们之间使用延迟，以便在另一个完成后播放。

您之前使用过渡，然后是动画，这是两个独立的事物。此外，浏览器前缀对于动画来说现在非常多余，我个人会使用非前缀语法。

以下是箭头向南移动然后摆动的一个示例，您需要添加其他箭头：

CSS示例

.wrap:hover #arrow {
  transform-origin: 50% 59.7%;
  animation-name: spinSouth, wiggleSouth;
  animation-delay: 0s, 1s;
  animation-duration: 1s, 1s;
  animation-iteration-count: 1, infinite;
}

/* Spin south Animation */
@keyframes spinSouth {
  0% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(225deg);
  }
}

/* Wiggle Animation */
@keyframes wiggleSouth {
  0% {
    transform: rotate(225deg);
  }
  50% {
    transform: rotate(220deg);
  }
  100% {
    transform: rotate(225deg);
  }
}

<强>小提琴： http://jsfiddle.net/5cn9sm99/

Answer 2

我认为这可能是您已有代码的更短解决方案。您可以将箭头包装在箭头容器中，如下所示：

<g id="arrowContainer">    
  <polygon id="arrow" class="st2 west" points="78.4,105.3 80.2,107.1 79.1,108.3 77.2,106.4 75.5,109.7 74.1,108.6 75.9,105.1 75.1,104.3 
    73.3,107.7 71.9,106.6 73.8,103 72.9,102.1 71.2,105.6 69.8,104.5 71.7,100.9 63.5,92.7 63.5,92.7 41.5,70.7 41.4,70.8 39,74.3 
    34.5,62.5 46.3,67.1 42.5,69.5 64.6,91.6 65.2,92.1 72.9,99.8 76.5,98 77.6,99.5 74.1,101.1 74.9,101.9 78.6,100 79.7,101.4 
  76.2,103.1 75.9,102.9 77.1,104 80.8,102.3 81.9,103.8 "/>
</g>

然后添加此样式以使容器的轴心点居中：

#arrowContainer{  transform-origin: 50% 50%;  }

现在替换Rotations以定位arrowContainer并使用Javascript或jQuery添加您已创建的类。这是完整的代码。

＆＃13;

var changeDirection = function changeClass(myClass){
    $('#compass').attr("class", myClass);
}

＆＃13;

div {
  max-width: 300px;
}
.st0 {
  fill: none;
  stroke: #505050;
  stroke-width: 4.11;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.st1 {
  fill: none;
  stroke: #808080;
  stroke-width: 2.57;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.st2 {
  fill: #505050;
}

.st3 {
  opacity: 0.5;
}

.st4 {
  fill: none;
}


/* Fill Colors */

.green {
  fill: rgba(21, 255, 0, 0.5);
}

.dgreen {
  fill: rgba(12, 140, 0, 0.5);
}

.red {
  fill: rgba(255, 42, 0, 0.5);
}

.dred {
  fill: rgba(140, 23, 0, 0.5);
}

/* Arrow */
#arrowContainer{
  transform-origin: 50% 50%;
  }
#arrow {
  transform-origin: 50% 59.7%;
  animation-name: wiggle;
  animation-duration: 1s;
  animation-fill-mode: forward;
  -webkit-animation-fill-mode: forward;
  -webkit-animation-iteration-count: infinite;
  /* Safari 4.0 - 8.0 */
  animation-iteration-count: infinite;
}


/* Rotations */

.north #arrowContainer {
  -webkit-transform: rotate(45deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
}
.northEast #arrowContainer {
  -webkit-transform: rotate(90deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
}
.east #arrowContainer {
  -webkit-transform: rotate(135deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
}
.southEast #arrowContainer {
  -webkit-transform: rotate(180deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
}
.south #arrowContainer {
  -webkit-transform: rotate(225deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
}
.southWest #arrowContainer {
  -webkit-transform: rotate(270deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
}
.west #arrowContainer {
  -webkit-transform: rotate(315deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
}
.northWest #arrowContainer {
  -webkit-transform: rotate(0deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
}


/* Wiggle Animation */


/* safari and chrome */

@-webkit-keyframes compass {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: rotate(4deg);
  }
  50% {
    -webkit-transform: rotate(-4deg);
  }
  100% {
    -webkit-transform: rotate(4deg);
  }
}

/* firefox */

@-moz-keyframes wiggle {
  0% {
    -moz-transform: rotate(4deg);
  }
  50% {
    -moz-transform: rotate(-4deg);
  }
  100% {
    -moz-transform: rotate(4deg);
  }
}

@keyframes wiggle {
  0% {
    transform: rotate(4deg);
  }
  50% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(4deg);
  }
}

/* Button Styles */
.buttons{
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<button onclick="changeDirection('north')">North</button>
  <button onclick="changeDirection('northEast')">NorthEast</button>
  <button onclick="changeDirection('east')">East</button>
  <button onclick="changeDirection('southEast')">South East</button>
  <button onclick="changeDirection('south')">South</button>
  <button onclick="changeDirection('southWest')">South West</button>
  
  <button onclick="changeDirection('west')">West</button>
  <button onclick="changeDirection('northWest')">North West</button>
</div>
<div id="compass" class="addClassHere">
  <?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <svg version="1.1" id="Layer_4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 116.3 144" style="enable-background:new 0 0 116.3 144;" xml:space="preserve">
    
    <title>compass</title>
    <line id="N" class="st0" x1="58.2" y1="31.3" x2="58.2" y2="49.6"/>
    <line id="NW" class="st1" x1="18.5" y1="46.1" x2="31.4" y2="59"/>
    <line id="W" class="st0" x1="3.6" y1="85.7" x2="21.9" y2="85.7"/>
    <line id="SW" class="st1" x1="18.3" y1="125.5" x2="31.3" y2="112.5"/>
    <line id="S" class="st0" x1="58" y1="140.3" x2="58" y2="122"/>
    <line id="SE" class="st1" x1="97.7" y1="125.6" x2="84.8" y2="112.6"/>
    <line id="E" class="st0" x1="113.4" y1="85.9" x2="95.1" y2="85.9"/>
    <line id="NE" class="st1" x1="97.8" y1="46.2" x2="84.9" y2="59.1"/>
    <path id="compass" class="st2" d="M69.6,28.8c6.7-6.3,7-16.9,0.7-23.6s-16.9-7-23.6-0.7s-7,16.9-0.7,23.6c0.2,0.2,0.4,0.5,0.7,0.7
    	c-31.5,6.3-51.9,37-45.6,68.5s37,51.9,68.5,45.6c31.5-6.3,51.9-37,45.6-68.5C110.6,51.4,92.6,33.4,69.6,28.8z M58.2,6.5
    	c5.6,0,10.2,4.6,10.2,10.2H48C48,11.1,52.6,6.5,58.2,6.5z M58.2,138.3c-29,0-52.5-23.5-52.5-52.5s23.5-52.5,52.5-52.5
    	c29,0,52.5,23.5,52.5,52.5c0,0,0,0,0,0C110.6,114.8,87.1,138.3,58.2,138.3z"/>
    <path id="inner_compass" class="st2" d="M58.2,130.8c-24.9,0-45.2-20.2-45.2-45.2s20.2-45.2,45.2-45.2c24.9,0,45.2,20.2,45.2,45.1
    	c0,0,0,0,0,0C103.3,110.6,83.1,130.8,58.2,130.8z M58.2,43.8c-23.1,0-41.9,18.8-41.9,41.9s18.8,41.9,41.9,41.9s41.9-18.8,41.9-41.9
    	C100.1,62.6,81.3,43.8,58.2,43.8L58.2,43.8z"/>
    <g id="NNW" class="st3">
    	<path id="nnwPie" class="st4 green" d="M57.9,27.7v58.2l-41-41C27.8,33.9,42.5,27.7,57.9,27.7z"/>
    </g>
    <g id="WNW" class="st3">
    	<path id="wnwPie" class="st4 dgreen" d="M57.9,85.8H0.2v-0.2c0-15.3,6-30,16.8-40.8L57.9,85.8z"/>
    </g>
    <g id="WSW">
    	<path id="wswPie" class="st4" d="M57.9,85.8l-40.8,40.8c-10.8-10.8-16.9-25.5-17-40.8H57.9z"/>
    </g>
    <g id="SSW">
    	<path id="sswPie" class="st4" d="M57.9,85.8v57.8c-15.3,0-30-6.2-40.8-17L57.9,85.8z"/>
    </g>
    <g id="SSE">
    	<path id="ssePie" class="st4 red" d="M99,126.9c-10.8,10.8-25.5,16.8-40.8,16.8H58V85.8L99,126.9z"/>
    </g>
    <g id="ESE">
    	<path id="esePie" class="st4 dred" d="M116.2,85.8c0,15.4-6.2,30.2-17.2,41l-41-41H116.2z"/>
    </g>
    <g id="ENE">
    	<path id="enePie" class="st4" d="M116.2,85.7v0.2H57.9l41.2-41.2C110.1,55.5,116.2,70.3,116.2,85.7z"/>
    </g>
    <g id="NNE">
    	<path id="nnePie" class="st4" d="M99.1,44.6L57.9,85.8V27.7h0.2C73.5,27.6,88.3,33.7,99.1,44.6z"/>
    </g>
    <g id="arrowContainer">
    
    <polygon id="arrow" class="st2 west" points="78.4,105.3 80.2,107.1 79.1,108.3 77.2,106.4 75.5,109.7 74.1,108.6 75.9,105.1 75.1,104.3 
    	73.3,107.7 71.9,106.6 73.8,103 72.9,102.1 71.2,105.6 69.8,104.5 71.7,100.9 63.5,92.7 63.5,92.7 41.5,70.7 41.4,70.8 39,74.3 
    	34.5,62.5 46.3,67.1 42.5,69.5 64.6,91.6 65.2,92.1 72.9,99.8 76.5,98 77.6,99.5 74.1,101.1 74.9,101.9 78.6,100 79.7,101.4 
      76.2,103.1 75.9,102.9 77.1,104 80.8,102.3 81.9,103.8 "/>
      </g>
    </svg>
</div>

＆＃13;

CSS动画旋转然后摆动SVG

2 个答案: