CSS动画旋转然后摆动SVG

【问题标题】：CSS animation rotate then wiggle SVGCSS动画旋转然后摆动SVG
【发布时间】：2018-04-15 01:32:05
【问题描述】：

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

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

【问题讨论】：

    标签： css animation svg


    【解决方案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/

    【讨论】：

    • 感谢您让我走上正轨。感谢您的帮助。
    【解决方案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 添加您已经创建的类。这是完整的代码。

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

    【讨论】：

      猜你喜欢
      • 2016-05-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-05-17
      • 2016-06-14
      • 2014-06-06
      • 2014-07-23
      • 2019-04-15
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode