不考虑SVG中的动画延迟

时间:2018-12-12 10:58:06

标签: html html5 css3 animation svg

我想使货币出现,这是代码:

@keyframes appearUp {
  0% {
    opacity: 1;
    transform: translate3d(0, 5px, 0);
  }
  100% {
    transform: translate3d(0, -5px, 0);
  }
}

#currency-usd,
#currency-euro,
#currency-pound {
  opacity: 0;
}
#currency-usd {
  animation: appearUp 5s ease-out 0s infinite;
}
#currency-euro {
  animation: appearUp 5s ease-out 5s infinite;
}
#currency-pound {
  animation: appearUp 5s ease-out 10s infinite;
}
<svg id="city-total-v2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">

<g id="Roundblockcurrency">
 <linearGradient id="SVGID_454_" gradientUnits="userSpaceOnUse" x1="379.3599" y1="466.0918" x2="379.3599" y2="508.5988"><stop offset="0" style="stop-color: rgb(124, 10, 103);"></stop><stop offset="1" style="stop-color: rgb(178, 18, 85);"></stop></linearGradient>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_454_)" d="M352.21,531.89l0-0.05v-61.9 c12.06-11.81,31.17-21.38,54.29-28.16v61.9c-23.13,6.78-42.23,16.35-54.29,28.16L352.21,531.89L352.21,531.89z"></path>
	<path id="currency-usd" fill-rule="evenodd" clip-rule="evenodd" fill="#F07A28" d="M397.79,477.91c0,2-0.68,4.13-2.05,6.39
		c-1.37,2.26-3.11,4.3-5.24,6.14v2.42c0,0.68-0.23,1.39-0.69,2.14c-0.46,0.75-1.03,1.35-1.72,1.79c-0.66,0.42-1.21,0.55-1.66,0.38
		c-0.45-0.16-0.67-0.59-0.67-1.26v-2.18c-1.42,0.78-2.71,1.32-3.88,1.61c-1.17,0.29-2.31,0.32-3.41,0.09
		c-0.71-0.17-1.06-0.63-1.06-1.38c0-0.6,0.22-1.27,0.67-2.01c0.45-0.74,0.98-1.32,1.62-1.72c0.5-0.32,0.95-0.46,1.34-0.4
		c0.82,0.13,1.59,0.14,2.33,0.04c0.74-0.1,1.54-0.36,2.41-0.79v-7.6c-5.28,2.44-7.92,1.54-7.92-2.72c0-2.16,0.74-4.4,2.21-6.74
		c1.47-2.34,3.38-4.42,5.72-6.23v-1.28c0-0.67,0.23-1.39,0.69-2.14c0.46-0.75,1.03-1.35,1.72-1.79c0.66-0.42,1.21-0.55,1.66-0.39
		c0.45,0.17,0.67,0.59,0.67,1.26v1.44c2.23-1.05,4.07-1.43,5.52-1.14c0.76,0.1,1.14,0.55,1.14,1.33c0,0.6-0.22,1.27-0.67,2.01
		c-0.45,0.74-0.97,1.31-1.58,1.7c-0.39,0.25-0.75,0.37-1.06,0.33c-0.79-0.14-1.91,0.02-3.35,0.48v7.21c2.55-1.05,4.4-1.36,5.56-0.95
		C397.21,474.35,397.79,475.68,397.79,477.91L397.79,477.91z M382.49,475.65c0,0.86,0.28,1.37,0.83,1.55
		c0.55,0.18,1.37,0.07,2.44-0.31v-6.47c-1.08,0.9-1.89,1.8-2.44,2.71C382.77,474.03,382.49,474.87,382.49,475.65L382.49,475.65z
		 M390.49,485.76c0.76-0.8,1.38-1.61,1.85-2.42c0.47-0.81,0.71-1.52,0.71-2.11c0-0.73-0.21-1.22-0.63-1.48
		c-0.42-0.26-1.06-0.29-1.93-0.1V485.76L390.49,485.76z"/>
  <path id="currency-euro" fill="#F07A28" d="M399.44,482.88c0,0.33-0.09,0.69-0.27,1.08c-0.18,0.4-0.42,0.77-0.72,1.11c-0.96,1.18-2.02,2.29-3.19,3.34
    s-2.34,1.93-3.52,2.64c-3.02,1.8-5.72,2.57-8.1,2.31s-4.06-1.61-5.02-4.06l-2.3,1.38c-0.58,0.35-1.06,0.46-1.44,0.33
    c-0.39-0.13-0.58-0.46-0.58-1.01s0.19-1.11,0.58-1.7c0.38-0.59,0.86-1.05,1.44-1.4l1.6-0.96c-0.03-0.29-0.04-0.76-0.04-1.42v-0.74
    l-1.56,0.93c-0.58,0.35-1.06,0.45-1.44,0.33c-0.39-0.13-0.58-0.46-0.58-1.01s0.19-1.12,0.58-1.7c0.38-0.58,0.86-1.05,1.44-1.39
    l2.18-1.3c0.55-2.33,1.46-4.64,2.74-6.94c1.28-2.3,2.82-4.41,4.63-6.34s3.77-3.53,5.88-4.79c1.18-0.71,2.34-1.23,3.47-1.56
    c1.14-0.34,2.2-0.49,3.19-0.44c0.66-0.04,0.99,0.31,0.99,1.05c0,0.49-0.17,1.04-0.49,1.65c-0.33,0.64-0.78,1.13-1.36,1.47
    c-0.38,0.23-0.75,0.35-1.11,0.38c-1.45-0.09-3.02,0.36-4.69,1.36c-2.11,1.26-3.98,2.94-5.61,5.04c-1.63,2.1-2.82,4.34-3.56,6.74
    l6.62-3.92c0.58-0.35,1.06-0.45,1.44-0.33c0.38,0.13,0.58,0.45,0.58,0.97c0,0.55-0.19,1.12-0.58,1.7
    c-0.38,0.59-0.86,1.05-1.44,1.4l-7.41,4.38v0.74c0,0.33,0.03,0.8,0.08,1.43l7.32-4.33c0.58-0.34,1.06-0.45,1.44-0.33
    c0.38,0.13,0.58,0.45,0.58,0.97c0,0.55-0.19,1.12-0.58,1.7c-0.38,0.59-0.86,1.05-1.44,1.39l-6.38,3.81
    c0.8,1.34,1.98,2.03,3.56,2.07c1.58,0.04,3.37-0.53,5.37-1.73c1.73-1.03,3.29-2.46,4.69-4.28c0.33-0.36,0.69-0.66,1.07-0.88
    c0.6-0.36,1.08-0.41,1.44-0.16C399.27,482.07,399.44,482.42,399.44,482.88z"/>
  <path id="currency-pound" fill="#F07A28" d="M398.65,482.29c0.28,0.19,0.42,0.53,0.42,1.01c0,0.57-0.19,1.13-0.56,1.71c-0.38,0.57-0.97,1.21-1.77,1.93
    c-1.08,1.04-2.26,1.9-3.55,2.57c-1,0.52-2.81,1.13-5.45,1.86c-2.42,0.64-4.06,1.18-4.92,1.63c-1.08,0.56-2.34,1.41-3.79,2.57
    c-0.32,0.22-0.66,0.53-1.01,0.93c-0.48,0.47-0.83,0.76-1.05,0.87c-0.4,0.21-0.75,0.24-1.05,0.08c-0.3-0.15-0.44-0.46-0.44-0.92
    c0-0.48,0.15-0.98,0.44-1.48c0.3-0.5,0.71-1,1.25-1.5c1.08-0.91,2.1-1.71,3.07-2.4c0.65-1.38,0.97-2.83,0.97-4.33
    c0-1.4-0.31-2.89-0.93-4.48l-2.54,1.32c-0.51,0.26-0.93,0.32-1.27,0.15c-0.34-0.16-0.5-0.5-0.5-1.01c0-0.46,0.17-0.93,0.5-1.41
    c0.34-0.48,0.76-0.86,1.27-1.12l1.53-0.79c-0.32-1.07-0.48-2.06-0.48-2.98c0-1.75,0.36-3.5,1.09-5.24
    c0.73-1.75,1.77-3.35,3.15-4.82c1.37-1.46,2.99-2.68,4.84-3.64c1.24-0.64,2.42-1.08,3.55-1.32c1.13-0.24,2.08-0.23,2.86,0.01
    c1.13,0.14,1.69,0.59,1.69,1.34c0,0.51-0.19,1.07-0.58,1.68c-0.39,0.61-0.85,1.05-1.39,1.33c-0.27,0.14-0.53,0.22-0.79,0.25
    s-0.45-0.01-0.58-0.1c-1.24-0.68-2.81-0.52-4.72,0.47c-1.59,0.82-2.84,2-3.77,3.53c-0.93,1.53-1.39,3.05-1.39,4.55
    c0,0.75,0.17,1.71,0.52,2.87l7.38-3.83c0.51-0.27,0.93-0.32,1.27-0.17c0.34,0.15,0.5,0.48,0.5,0.99c0,0.48-0.17,0.97-0.5,1.45
    c-0.34,0.48-0.76,0.86-1.27,1.12l-6.29,3.26c0.56,1.4,0.85,2.63,0.85,3.68c0,1.53-0.42,3.21-1.25,5.04
    c0.67-0.32,1.32-0.57,1.96-0.73s1.5-0.37,2.6-0.62c1.08-0.26,1.94-0.49,2.58-0.67c0.65-0.19,1.28-0.44,1.9-0.76
    c0.51-0.27,1.05-0.64,1.63-1.13c0.58-0.49,1.07-0.96,1.47-1.41c0.51-0.59,0.98-0.99,1.41-1.22
    C397.98,482.13,398.36,482.1,398.65,482.29z"/>

</g>

</svg>

由于某些原因,延误没有得到遵守,并且货币usd / euro / pound都位于上方。

如果有人可以看到我失败的地方,请先感谢

1 个答案:

答案 0 :(得分:1)

  • usd动画从0s开始运行,5s然后无限期重复。<​​/ li>
  • 第二次开始与euro动画的开始重合。因此,两者一起运行。
  • 第三次pound开始,并且三个继续无限循环。

您需要确保一次只显示一个。一种方法是使用关键帧隐藏符号,并在其他两个动画时将其保持隐藏状态。

@keyframes appearUp {
  0% {
    opacity: 1;
    transform: translate(0, 5px);
  }
  33% {
    opacity: 1;
    transform: translate(0, -5px);
  }
  34% {
    opacity: 0;
  }
}

#currency-usd,
#currency-euro,
#currency-pound {
  opacity: 0;
}
#currency-usd {
  animation: appearUp 15s ease-out 0s infinite;
}
#currency-euro {
  animation: appearUp 15s ease-out 5s infinite;
}
#currency-pound {
  animation: appearUp 15s ease-out 10s infinite;
}
<svg id="city-total-v2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">

<g id="Roundblockcurrency">
 <linearGradient id="SVGID_454_" gradientUnits="userSpaceOnUse" x1="379.3599" y1="466.0918" x2="379.3599" y2="508.5988"><stop offset="0" style="stop-color: rgb(124, 10, 103);"></stop><stop offset="1" style="stop-color: rgb(178, 18, 85);"></stop></linearGradient>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_454_)" d="M352.21,531.89l0-0.05v-61.9 c12.06-11.81,31.17-21.38,54.29-28.16v61.9c-23.13,6.78-42.23,16.35-54.29,28.16L352.21,531.89L352.21,531.89z"></path>
	<path id="currency-usd" fill-rule="evenodd" clip-rule="evenodd" fill="#F07A28" d="M397.79,477.91c0,2-0.68,4.13-2.05,6.39
		c-1.37,2.26-3.11,4.3-5.24,6.14v2.42c0,0.68-0.23,1.39-0.69,2.14c-0.46,0.75-1.03,1.35-1.72,1.79c-0.66,0.42-1.21,0.55-1.66,0.38
		c-0.45-0.16-0.67-0.59-0.67-1.26v-2.18c-1.42,0.78-2.71,1.32-3.88,1.61c-1.17,0.29-2.31,0.32-3.41,0.09
		c-0.71-0.17-1.06-0.63-1.06-1.38c0-0.6,0.22-1.27,0.67-2.01c0.45-0.74,0.98-1.32,1.62-1.72c0.5-0.32,0.95-0.46,1.34-0.4
		c0.82,0.13,1.59,0.14,2.33,0.04c0.74-0.1,1.54-0.36,2.41-0.79v-7.6c-5.28,2.44-7.92,1.54-7.92-2.72c0-2.16,0.74-4.4,2.21-6.74
		c1.47-2.34,3.38-4.42,5.72-6.23v-1.28c0-0.67,0.23-1.39,0.69-2.14c0.46-0.75,1.03-1.35,1.72-1.79c0.66-0.42,1.21-0.55,1.66-0.39
		c0.45,0.17,0.67,0.59,0.67,1.26v1.44c2.23-1.05,4.07-1.43,5.52-1.14c0.76,0.1,1.14,0.55,1.14,1.33c0,0.6-0.22,1.27-0.67,2.01
		c-0.45,0.74-0.97,1.31-1.58,1.7c-0.39,0.25-0.75,0.37-1.06,0.33c-0.79-0.14-1.91,0.02-3.35,0.48v7.21c2.55-1.05,4.4-1.36,5.56-0.95
		C397.21,474.35,397.79,475.68,397.79,477.91L397.79,477.91z M382.49,475.65c0,0.86,0.28,1.37,0.83,1.55
		c0.55,0.18,1.37,0.07,2.44-0.31v-6.47c-1.08,0.9-1.89,1.8-2.44,2.71C382.77,474.03,382.49,474.87,382.49,475.65L382.49,475.65z
		 M390.49,485.76c0.76-0.8,1.38-1.61,1.85-2.42c0.47-0.81,0.71-1.52,0.71-2.11c0-0.73-0.21-1.22-0.63-1.48
		c-0.42-0.26-1.06-0.29-1.93-0.1V485.76L390.49,485.76z"/>
  <path id="currency-euro" fill="#F07A28" d="M399.44,482.88c0,0.33-0.09,0.69-0.27,1.08c-0.18,0.4-0.42,0.77-0.72,1.11c-0.96,1.18-2.02,2.29-3.19,3.34
    s-2.34,1.93-3.52,2.64c-3.02,1.8-5.72,2.57-8.1,2.31s-4.06-1.61-5.02-4.06l-2.3,1.38c-0.58,0.35-1.06,0.46-1.44,0.33
    c-0.39-0.13-0.58-0.46-0.58-1.01s0.19-1.11,0.58-1.7c0.38-0.59,0.86-1.05,1.44-1.4l1.6-0.96c-0.03-0.29-0.04-0.76-0.04-1.42v-0.74
    l-1.56,0.93c-0.58,0.35-1.06,0.45-1.44,0.33c-0.39-0.13-0.58-0.46-0.58-1.01s0.19-1.12,0.58-1.7c0.38-0.58,0.86-1.05,1.44-1.39
    l2.18-1.3c0.55-2.33,1.46-4.64,2.74-6.94c1.28-2.3,2.82-4.41,4.63-6.34s3.77-3.53,5.88-4.79c1.18-0.71,2.34-1.23,3.47-1.56
    c1.14-0.34,2.2-0.49,3.19-0.44c0.66-0.04,0.99,0.31,0.99,1.05c0,0.49-0.17,1.04-0.49,1.65c-0.33,0.64-0.78,1.13-1.36,1.47
    c-0.38,0.23-0.75,0.35-1.11,0.38c-1.45-0.09-3.02,0.36-4.69,1.36c-2.11,1.26-3.98,2.94-5.61,5.04c-1.63,2.1-2.82,4.34-3.56,6.74
    l6.62-3.92c0.58-0.35,1.06-0.45,1.44-0.33c0.38,0.13,0.58,0.45,0.58,0.97c0,0.55-0.19,1.12-0.58,1.7
    c-0.38,0.59-0.86,1.05-1.44,1.4l-7.41,4.38v0.74c0,0.33,0.03,0.8,0.08,1.43l7.32-4.33c0.58-0.34,1.06-0.45,1.44-0.33
    c0.38,0.13,0.58,0.45,0.58,0.97c0,0.55-0.19,1.12-0.58,1.7c-0.38,0.59-0.86,1.05-1.44,1.39l-6.38,3.81
    c0.8,1.34,1.98,2.03,3.56,2.07c1.58,0.04,3.37-0.53,5.37-1.73c1.73-1.03,3.29-2.46,4.69-4.28c0.33-0.36,0.69-0.66,1.07-0.88
    c0.6-0.36,1.08-0.41,1.44-0.16C399.27,482.07,399.44,482.42,399.44,482.88z"/>
  <path id="currency-pound" fill="#F07A28" d="M398.65,482.29c0.28,0.19,0.42,0.53,0.42,1.01c0,0.57-0.19,1.13-0.56,1.71c-0.38,0.57-0.97,1.21-1.77,1.93
    c-1.08,1.04-2.26,1.9-3.55,2.57c-1,0.52-2.81,1.13-5.45,1.86c-2.42,0.64-4.06,1.18-4.92,1.63c-1.08,0.56-2.34,1.41-3.79,2.57
    c-0.32,0.22-0.66,0.53-1.01,0.93c-0.48,0.47-0.83,0.76-1.05,0.87c-0.4,0.21-0.75,0.24-1.05,0.08c-0.3-0.15-0.44-0.46-0.44-0.92
    c0-0.48,0.15-0.98,0.44-1.48c0.3-0.5,0.71-1,1.25-1.5c1.08-0.91,2.1-1.71,3.07-2.4c0.65-1.38,0.97-2.83,0.97-4.33
    c0-1.4-0.31-2.89-0.93-4.48l-2.54,1.32c-0.51,0.26-0.93,0.32-1.27,0.15c-0.34-0.16-0.5-0.5-0.5-1.01c0-0.46,0.17-0.93,0.5-1.41
    c0.34-0.48,0.76-0.86,1.27-1.12l1.53-0.79c-0.32-1.07-0.48-2.06-0.48-2.98c0-1.75,0.36-3.5,1.09-5.24
    c0.73-1.75,1.77-3.35,3.15-4.82c1.37-1.46,2.99-2.68,4.84-3.64c1.24-0.64,2.42-1.08,3.55-1.32c1.13-0.24,2.08-0.23,2.86,0.01
    c1.13,0.14,1.69,0.59,1.69,1.34c0,0.51-0.19,1.07-0.58,1.68c-0.39,0.61-0.85,1.05-1.39,1.33c-0.27,0.14-0.53,0.22-0.79,0.25
    s-0.45-0.01-0.58-0.1c-1.24-0.68-2.81-0.52-4.72,0.47c-1.59,0.82-2.84,2-3.77,3.53c-0.93,1.53-1.39,3.05-1.39,4.55
    c0,0.75,0.17,1.71,0.52,2.87l7.38-3.83c0.51-0.27,0.93-0.32,1.27-0.17c0.34,0.15,0.5,0.48,0.5,0.99c0,0.48-0.17,0.97-0.5,1.45
    c-0.34,0.48-0.76,0.86-1.27,1.12l-6.29,3.26c0.56,1.4,0.85,2.63,0.85,3.68c0,1.53-0.42,3.21-1.25,5.04
    c0.67-0.32,1.32-0.57,1.96-0.73s1.5-0.37,2.6-0.62c1.08-0.26,1.94-0.49,2.58-0.67c0.65-0.19,1.28-0.44,1.9-0.76
    c0.51-0.27,1.05-0.64,1.63-1.13c0.58-0.49,1.07-0.96,1.47-1.41c0.51-0.59,0.98-0.99,1.41-1.22
    C397.98,482.13,398.36,482.1,398.65,482.29z"/>

</g>

</svg>