CSSアニメーションを回転させてSVGを動かす

Question

私はそこに矢印のあるSVGコンパスを持っています。私は矢印にクラスを追加して、それをある程度回転させてそこにとどまり、揺れるようにしたいと思っています。 私は回転と揺れは一緒にではなく働いています。彼らは一緒に働くので、2つを組み合わせる方法がわからない。ここに私のコードは次のとおりです。

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

<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 
 
    \t 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 
 
    \t 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 
 
    \t 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 
 
    \t 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 
 
    \t C100.1,62.6,81.3,43.8,58.2,43.8L58.2,43.8z"/> 
 
    <g id="NNW" class="st3"> 
 
    \t <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"> 
 
    \t <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"> 
 
    \t <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"> 
 
    \t <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"> 
 
    \t <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"> 
 
    \t <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"> 
 
    \t <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"> 
 
    \t <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 
 
    \t 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 
 
    \t 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 
 
    \t 76.2,103.1 75.9,102.9 77.1,104 80.8,102.3 81.9,103.8 "/> 
 
    </svg> 
 
</div>

Answer 1

あなたは一緒にチェーンアニメーションに必要な、その他が終了した後に1が担っているので、それらの間の遅延を使用します。

以前は2つの別々のものであるトランジションとアニメーションを使用していました。また、ブラウザの接頭辞はアニメーションにはかなり冗長ですが、私は個人的に接頭辞のない構文を使用します。

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

今arrowContainerを対象とする回転を交換し、Javascriptを使用しますまたはjQueryを使用して、すでに作成したクラスを追加します。ここに完全なコードがあります。右のトラックに私を置く

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

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

<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 
 
    \t 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 
 
    \t 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 
 
    \t 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 
 
    \t 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 
 
    \t C100.1,62.6,81.3,43.8,58.2,43.8L58.2,43.8z"/> 
 
    <g id="NNW" class="st3"> 
 
    \t <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"> 
 
    \t <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"> 
 
    \t <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"> 
 
    \t <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"> 
 
    \t <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"> 
 
    \t <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"> 
 
    \t <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"> 
 
    \t <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 
 
    \t 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 
 
    \t 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>