我有一个SVG动画，我想知道如何在动画序列完成一次后停止并离开SVG。这样的标志停留在页面上，直到下一个页面刷新等如何停止svg动画？

HTML：

CSS：

*, *:before, *:after {

box-sizing: border-box;

margin: 0;

padding: 0;

}

.pin {

position: absolute;

left: 50%;

top: 50%;

margin-left: -60px;

margin-top: -60px;

width: 120px;

height: 120px;

overflow: visible;

}

.pin__group {

-webkit-transform-origin: 30px 30px;

transform-origin: 30px 30px;

-webkit-animation: group-anim 8s 1s infinite;

animation: group-anim 8s 1s infinite;

}

.pin__grayGroup {

-webkit-animation: gray-anim 8s 1s infinite;

animation: gray-anim 8s 1s infinite;

}

.pin__square {

stroke: #B8B8B8;

stroke-dasharray: 240, 240;

stroke-dashoffset: 240;

-webkit-animation: square-anim 8s 1s infinite;

animation: square-anim 8s 1s infinite;

}

.pin__line {

stroke: #B8B8B8;

stroke-dasharray: 60, 60;

stroke-dashoffset: 60;

}

.pin__line-1 {

-webkit-animation: line-anim 8s 0.6s infinite;

animation: line-anim 8s 0.6s infinite;

}

.pin__line-2 {

-webkit-animation: line-anim 8s 0.8s infinite;

animation: line-anim 8s 0.8s infinite;

}

.pin__line-3 {

-webkit-animation: line-anim 8s 1s infinite;

animation: line-anim 8s 1s infinite;

}

.pin__circleBig {

stroke: #B8B8B8;

stroke-dasharray: 188.522, 188.522;

stroke-dashoffset: 188.522;

-webkit-animation: bigCircle-anim 8s 1s infinite;

animation: bigCircle-anim 8s 1s infinite;

}

.pin__circleSmall {

stroke: #B8B8B8;

stroke-dasharray: 94.261, 94.261;

stroke-dashoffset: 94.261;

-webkit-animation: smallCircle-anim 8s 1s infinite;

animation: smallCircle-anim 8s 1s infinite;

}

.pin__outer {

stroke: #00CD73;

fill: transparent;

stroke-dasharray: 201.391, 201.391;

stroke-dashoffset: 201.391;

-webkit-animation: outer-anim 8s 1s infinite;

animation: outer-anim 8s 1s infinite;

}

.pin__inner {

stroke: #00CD73;

fill: transparent;

stroke-dasharray: 94.261, 94.261;

stroke-dashoffset: 94.261;

-webkit-animation: inner-anim 8s 1s infinite;

animation: inner-anim 8s 1s infinite;

}

@-webkit-keyframes square-anim {

15% {

stroke-dashoffset: 0;

}

100% {

stroke-dashoffset: 0;

}

}

@keyframes square-anim {

15% {

stroke-dashoffset: 0;

}

100% {

stroke-dashoffset: 0;

}

}

@-webkit-keyframes line-anim {

23% {

stroke-dashoffset: 60;

}

30% {

stroke-dashoffset: 0;

}

100% {

stroke-dashoffset: 0;

}

}

@keyframes line-anim {

23% {

stroke-dashoffset: 60;

}

30% {

stroke-dashoffset: 0;

}

100% {

stroke-dashoffset: 0;

}

}

@-webkit-keyframes bigCircle-anim {

30% {

stroke-dashoffset: 188.522;

}

43% {

stroke-dashoffset: 0;

}

100% {

stroke-dashoffset: 0;

}

}

@keyframes bigCircle-anim {

30% {

stroke-dashoffset: 188.522;

}

43% {

stroke-dashoffset: 0;

}

100% {

stroke-dashoffset: 0;

}

}

@-webkit-keyframes smallCircle-anim {

43% {

stroke-dashoffset: 94.261;

}

53% {

stroke-dashoffset: 0;

}

100% {

stroke-dashoffset: 0;

}

}

@keyframes smallCircle-anim {

43% {

stroke-dashoffset: 94.261;

}

53% {

stroke-dashoffset: 0;

}

100% {

stroke-dashoffset: 0;

}

}

@-webkit-keyframes group-anim {

53% {

-webkit-transform: rotate(0);

transform: rotate(0);

}

61% {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

94% {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

opacity: 1;

}

100% {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

opacity: 0;

}

}

@keyframes group-anim {

53% {

-webkit-transform: rotate(0);

transform: rotate(0);

}

61% {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

94% {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

opacity: 1;

}

100% {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

opacity: 0;

}

}

@-webkit-keyframes outer-anim {

61% {

stroke-dashoffset: 201.391;

}

71% {

stroke-dashoffset: 0;

}

79% {

stroke-dashoffset: 0;

fill: transparent;

}

94% {

stroke-dashoffset: 0;

fill: #00CD73;

}

100% {

stroke-dashoffset: 0;

fill: #00CD73;

}

}

@keyframes outer-anim {

61% {

stroke-dashoffset: 201.391;

}

71% {

stroke-dashoffset: 0;

}

79% {

stroke-dashoffset: 0;

fill: transparent;

}

94% {

stroke-dashoffset: 0;

fill: #00CD73;

}

100% {

stroke-dashoffset: 0;

fill: #00CD73;

}

}

@-webkit-keyframes inner-anim {

71% {

stroke-dashoffset: 94.261;

}

79% {

stroke-dashoffset: 0;

fill: transparent;

}

94% {

stroke-dashoffset: 0;

fill: white;

}

100% {

stroke-dashoffset: 0;

fill: white;

}

}

@keyframes inner-anim {

71% {

stroke-dashoffset: 94.261;

}

79% {

stroke-dashoffset: 0;

fill: transparent;

}

94% {

stroke-dashoffset: 0;

fill: white;

}

100% {

stroke-dashoffset: 0;

fill: white;

}

}

@-webkit-keyframes gray-anim {

53% {

opacity: 1;

}

79% {

opacity: 0.2;

}

94% {

opacity: 0;

}

100% {

opacity: 0;

}

}

@keyframes gray-anim {

53% {

opacity: 1;

}

79% {

opacity: 0.2;

}

94% {

opacity: 0;

}

100% {

opacity: 0;

}

}

我知道我可以删除“无限”属性来运行一次，但问题是，如何在停止之后立即停止它？

html语言让动画停止,如何停止svg动画？相关推荐

  1. android 载入svg动画,Android 加载SVG动画

    Android 加载SVG动画 SVG 可以说是目前比较流行的图片格式,使用领域也十分广泛,例如:web 前端页面,Android ios 等移动应用.都可以使用 SVG 的图片格式.今天就要和大家谈 ...

  2. android svg路径动画,五、Android SVG动画

    SVG的全称是Scalable Vector Graphics(可缩放矢量图形),它不会因为图像放大而失真,且占用内存小,同时搭配Path动画,能够实现一些意想不到的效果. Android中的SVG图 ...

  3. android svg路径动画,Android和播放SVG动画

    把你的SVG图像,并将其转换为VectorDrawable here 您下载的XML文件添加到您的项目,看看它的外观.这里有一个VectorDrawable的一个例子的旋转和路径变形动画准备: and ...

  4. SVG动画编程及其应用

    SVG动画编程及其应用 2008.03.16 张杰,刘晓平 来源:SVG中国(ChinaSVG.COM) 本文分析了SVG图形技术.SVG动画模型与DOM.SMIL.SIMLANIM的关系以及SVG简 ...

  5. HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画

    SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

  6. svg 动画_30个很棒的SVG动画

    作者:MrWang 转发链接:https://segmentfault.com/a/1190000023090287 前言 设计人员使用CSS在HTML元素中创建动画.然而,由于HTML元素在创建模式 ...

  7. html流程svg动画,html5 svg动画

    以上是svg的一个线上编辑器,也可以adobe Illustrator制作生成. 我们通过以上编辑器可以获得以下代码. 例: Layer 1 给路径path 添加 class 为 path1 .pat ...

  8. SVG 阴影 SVG 渐变 SVG 动画

    1 SVG 阴影 1.1 <defs> SVG 允许我们定义以后需要重复使用的图形元素.建议把所有需要再次使用的引用元素定义在 <defs> 元素里面.这样做可以增加 SVG ...

  9. 按钮滑动隐藏，停止滑动显示的动画

    想用tweenAnimation来做 res下新建anim文件夹,添加bottom_slide_in.xml和bottom_slide_out.xml bottom_slide_in.xml 滑入动画 ...

最新文章

  1. c语言贝叶斯分类,基于朴素贝叶斯分类器的文本分类算法(C语言)
  2. 实时人脸关键点源码推荐
  3. jsp mysql utf-8 中文乱码_jsp插入mysql数据库显示中文乱码问题
  4. oracle 00980,ORA-00980如何解决
  5. 【Linux】/dev/null 21 详解
  6. python 深copy_python中的深copy和浅copy
  7. linux 引导管理器,linux系统引导管理器GRUB
  8. 重新解释i++和++i
  9. python的神经网络模块接法图解_图神经网络库PyTorch geometric
  10. 是谁开发出手机曲面屏这种
  11. 多个生产者多个消费者，只有5个包子
  12. MacOS六个常用的终端命令
  13. 国内外优秀音视频博客
  14. C语言 爱心代码（颜色可改）
  15. Excel筛选出符合自己条件的数据
  16. 日本艺伎的拍照姿势，竟源于孔子？看完真的涨知识···
  17. 程序猿如何更好地指导自己处于什么水平，还有各个阶段应该学习什么
  18. python实现截取excel中的表格，生成图片
  19. 其他blast使用方法
  20. mac os 苹果操作系统如何切换输入法

热门文章

  1. Xilinx AXI Interconnect相关知识汇总-AXI协议理解（三）
  2. 【车间调度】FJSP的属性模型符号约定和约束条件
  3. appium 切换上下文的时候报错
  4. 叶雕——叹为观止的艺术！
  5. 小程序 picker下拉菜单实现
  6. 利用gitee仓库的流水线功能实现Java项目的自动化部署
  7. C++和java的区别和联系
  8. cmd默认是以管理员身份运行
  9. searchableSelect下拉框插件增加按拼音及首拼搜索
  10. 东软睿驰获本田加持的背后：传统车企与新势力的对垒升级