个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
27
4
我有一个使用 css 的动画 svg 行。
我希望动画持续时间为 200 秒，但我希望该行在结束后自动重新启动。
这是我的代码示例。
line {
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 500%;
stroke-dasharray: 0 \0/;
stroke-dashoffset: 0 \0/;
-webkit-animation: draw 200s infinite;
animation: draw 200s infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes draw {
0% {
stroke-dashoffset: 500%;
},
100% {
stroke-dashoffset: 0%;
}
}
@keyframes draw {
0% {
stroke-dashoffset: 500%;
},
100% {
stroke-dashoffset: 0%;
}
}<body>
<svg height="100" width="250">
<line x1="25" y1="30" x2="45" y2="30" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</body>为了重新启动动画，我更改了animation标签:
-webkit-animation: draw 200s 2s infinite;
animation: draw 200s 2s infinite;
然而，我得到的效果是:
如何在动画完成后自动重新启动动画。我需要使用 javascript 还是 jquery？
最佳答案
问题是您的动画持续时间设置为 200 秒，因此根据您的 CSS，它将在 200 秒后再次循环并再延迟 2 秒。据我了解，您希望缓慢绘制线条，因此您使用的是 200 秒的动画，这不是实现此目的的最佳方法——至少不是因为您希望动画在短暂延迟后重新启动。
您可以通过使用 ease-in 结合更改动画来使线条变慢，如下所示。这应该会达到您正在寻找的预期效果。
line {
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 500%;
stroke-dasharray: 0 \0/;
stroke-dashoffset: 0 \0/;
-webkit-animation: draw 2s ease-in infinite;
animation: draw 2s ease-in infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes draw {
0% {
stroke-dashoffset: 500%;
},
99% {
stroke-dashoffset: 500%;
},
100% {
stroke-dashoffset: 0%;
}
}
@keyframes draw {
0% {
stroke-dashoffset: 500%;
},
99% {
stroke-dashoffset: 500%;
},
100% {
stroke-dashoffset: 0%;
}
}<body>
<svg height="100" width="250">
<line x1="25" y1="30" x2="45" y2="30" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</body>关于css - 完成后如何自动重启动画 svg 行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50339953/
27
4
0
我有一个 UWP 应用程序(在 Windows/Microsoft Store 中发布)，我正在进行新的更新，我在我的应用程序中使用了 Template10，它具有深色和浅色主题，并且在 Window
我是 spring batch 的新手，有一些关于暂停/恢复的问题。看了spring batch的文档，好像没有内置的pause或者resume功能。但是，我从主站点找到了这个用例: http://d
我正在编写一个网络服务并有以下观察结果:即使我只是将一个文本文件添加到存储 web 服务引用的所有 dll 的目录 (bin)，appdomain 也会刷新。 这会导致存储在字典(在其中一个 dll
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 6 年前。 Improve this qu
Hadoop 1.0.3 工作 36 小时后说: INFO mapred.JobClient: map 42% reduce 0% mapred.JobClient: Job Failed
我使用 AVAssetWriter 将视频录制到文件中。所以我为此创建了类。 link to gist 然后在项目的某处我推送记录并开始录制视频。 func start() { assetWriter
我想要一个在后台运行的 python 脚本(无限循环)。 def main(): # inizialize and start threads [...] try:
我在重新启动 Activity 时感到困惑。我有两个功能可以很好地完成同一任务。请指导我哪个最好，为什么？ public void restart() { Intent
重启sidekiq的正确方法是什么。它似乎在我启动它时缓存了我的 worker 代码，所以每次我对我的 worker 进行更改时我都需要重新启动它。我正在使用 Ctrl/C 执行此操作，但该过程需要很
我在我的 Android 模拟器上安装了新字体。说明说我必须重新启动设备。我尝试使用“关机”按钮，但它只显示“正在关机”并且什么也不做。即使我去 adb shell 并运行“重启”它也会挂起。 任何想
启动操作 ? 1
关闭 service nginx stop systemctl stop nginx 启动 service nginx start systemctl start n
正在学习Linux中。。。一边学一边记录着。。所有观点只是个人观点 Linux有个文件 /etc/inittab 复制代码 代码如下:
如果我运行 systemctl restart kubelet它会影响其他正在运行的节点吗？它会停止集群吗？你能预见任何影响吗？ 任何帮助，将不胜感激! 最佳答案 在回答之前，小声明:重启不是由于对
嗯，问题是我有一个在 MATE 上完美运行的 Abyssus Razer，但是 在 Debian、Elementary、OpenSUSE 和其他平台上，默认 设置 super 慢。 我用 解决了这个问
我在 Ubuntu 16.04 上安装了 NGINX 并编辑了我的配置。 当我想用 sudo service nginx restart 重新启动时我得到错误: Job for nginx.servi
我已经在我的 Ubuntu 上安装了 Gearman Job Server(又名 Gearmand)1.0.6: Distributor ID: Ubuntu Description: Ubun
我有一个 WiX Burn使用 ManagedBootstrapperApplicationHost 的自定义安装程序。安装必备 Microsoft Windows Installer 之一后4.5
我已经使用 brew install mosquitto 在我的 mac 上安装了蚊子代理. 通常我不会给出任何命令来启动 mosquitto 服务器。当我打开我的 mac 时它会自动启动。 我已经使
我有一个带有 2 个容器的 pod test-1495806908-xn5jn。我想重新启动其中一个名为 container-test 的项目。是否可以重新启动 Pod 中的单个容器以及如何重新启动？
我是一名优秀的程序员,十分优秀！