css-animations
为 HyperFrames 创建可跳转的 CSS 动画
当预览和渲染在时间轴中跳转时，CSS 动画可能会发生漂移。此技能展示关键帧、计时、填充模式和验证的确定性模式。
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
Review the Skillstore skill "css-animations" from https://skillstore.io/skills/heygen-com-css-animations.md and its manifest at https://skillstore.io/api/skills/heygen-com-css-animations/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“css-animations”。 请求为四秒片段创建一个简单的脉冲效果。
预期结果:
一个脉冲环方案，包含固定计时、有限重复、填充模式指导，以及必需的 HyperFrames data 属性。
正在使用“css-animations”。 询问为什么 CSS 动画在预览期间无法正确跳转。
预期结果:
一个诊断结果，会检查 DOM 计时、动画时长、迭代次数、填充模式和浏览器动画句柄支持。
正在使用“css-animations”。 请求为三个元素提供可复用的错峰模式。
预期结果:
一种错峰动效方案，使用共享关键帧、每个元素的自定义属性和确定性延迟值。
安全审计
安全The static findings are false positives caused by Markdown inline code, fenced code blocks, fixed validation commands, and reference links. I found no prompt injection, data exfiltration intent, dynamic command construction, or other malicious behavior in SKILL.md.
风险因素
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/heygen-com-css-animations/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/heygen-com-css-animations?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/heygen-com-css-animations?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/heygen-com-css-animations/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/heygen-com-css-animations.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学术引用 (APA · BibTeX · CFF)
APA 引用
heygen-com. (2026). css-animations security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/heygen-com-css-animations/audits/6BibTeX 引用
@techreport{heygen-com-heygen-com-css-animations-2026,
author = {heygen-com},
title = {css-animations security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/heygen-com-css-animations/audits/6},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "css-animations security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "heygen-com"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/heygen-com-css-animations/audits/6"
identifiers:
- type: other
value: "skillstore:heygen-com-css-animations:audit:6"
description: "Skillstore immutable audit report identifier"
Skillstore 评分
评分依据 证据置信度: 高你能构建什么
添加渲染安全的动效
创建在 HyperFrames 预览和渲染跳转期间保持稳定的 CSS 关键帧效果。
审查动画计时
在渲染视频合成之前，检查时长、填充模式、延迟和迭代次数。
标准化团队模式
为贡献者提供简单循环、闪光、发光、蒙版和错峰元素的共享示例。
试试这些提示
为单个元素创建 HyperFrames CSS 动画模式。使用固定时长、有限迭代次数、data-start 和 animation-fill-mode。
审查此 CSS 动画以用于 HyperFrames。使其具有确定性，并解释对时长、延迟、填充模式和迭代次数所做的任何更改。
使用自定义属性创建错峰的 HyperFrames CSS 动画。保持计时可跳转，并避免事件驱动的状态变化。
审计此 HyperFrames 合成中的 CSS 动画风险。识别非确定性触发器、无限循环、布局动画和验证步骤。
最佳实践
- 为渲染关键的 CSS 动效使用有限时长和迭代次数。
- 设置 animation-fill-mode，使跳转后的状态在运动前后保持。
- 在更改关键帧、延迟或计时后验证合成。
避免
- 不要依赖 hover、focus、scroll 或媒体查询来实现渲染关键动效。
- 当 transform 或 opacity 可以产生相同效果时，不要为布局属性设置动画。
- 除非已验证可跳转的浏览器动画句柄，否则不要使用无限 CSS 动画。
常见问题
此技能帮助构建什么？
它会替代 GSAP 时间轴吗？
为什么建议使用有限迭代次数？
它能处理错峰元素吗？
我应该避免什么？
它需要网络访问吗？
开发者详情
作者
heygen-com许可证
MIT
Skillstore 修订
r1
版本提示
作者未声明版本。
引用
0519034dad657fb1f7706e0550e962beeda73fdf
维护新鲜度
2026/7/18
使用量
2 次下载 · 29 次浏览
文件结构
📄 SKILL.md