css-animations
HyperFrames向けのシーク可能なCSSアニメーションを作成する
プレビューやレンダーが時間軸上をシークすると、CSSアニメーションはずれることがあります。このスキルでは、keyframes、タイミング、fill modes、検証のための決定論的なパターンを示します。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の 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.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「css-animations」を使用しています。 4秒のクリップ向けにシンプルなpulseエフェクトを依頼する。
期待される結果:
固定タイミング、有限の繰り返し、fill modeのガイダンス、必要なHyperFrames data属性を含むpulse ringプラン。
「css-animations」を使用しています。 プレビュー中にCSSアニメーションが正しくシークされない理由を尋ねる。
期待される結果:
DOMタイミング、animation duration、iteration count、fill mode、ブラウザのanimation handleサポートを確認する診断。
「css-animations」を使用しています。 3つの要素向けの再利用可能なstaggerパターンを依頼する。
期待される結果:
共有keyframes、要素ごとのcustom properties、決定論的なdelay値を使用したstaggered motionアプローチ。
セキュリティ監査
安全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 keyframeエフェクトを作成します。
アニメーションタイミングをレビューする
動画compositionがレンダーされる前に、durations、fill modes、delays、iteration countsを確認します。
チームのパターンを標準化する
シンプルなループ、shimmer、glow、masks、staggered elementsの共有例をコントリビューターに提供します。
これらのプロンプトを試す
単一要素向けのHyperFrames CSSアニメーションパターンを作成してください。固定duration、有限iterations、data-start、animation-fill-modeを使用してください。
このCSSアニメーションをHyperFrames向けにレビューしてください。決定論的にし、duration、delay、fill mode、iteration countへの変更を説明してください。
custom propertiesを使用してstaggered HyperFrames CSSアニメーションを作成してください。タイミングをシーク可能に保ち、イベント駆動の状態変更を避けてください。
このHyperFrames compositionについて、CSSアニメーションのリスクを監査してください。非決定論的なトリガー、無限ループ、レイアウトアニメーション、検証手順を特定してください。
ベストプラクティス
- レンダーが重要なCSSモーションには、有限のdurationsとiteration countsを使用してください。
- シークされた状態が動作の前後で保持されるようにanimation-fill-modeを設定してください。
- keyframes、delays、timingを変更した後はcompositionを検証してください。
回避
- レンダーが重要なモーションでhover、focus、scroll、media queriesに依存しないでください。
- transformまたはopacityで同じ効果を得られる場合は、layout propertiesをアニメーションしないでください。
- シーク可能なブラウザanimation handlesが確認されていない限り、無限CSSアニメーションを使用しないでください。
よくある質問
このスキルは何の構築に役立ちますか？
GSAP timelinesを置き換えますか？
有限のiteration countsが推奨されるのはなぜですか？
staggered elementsを扱えますか？
何を避けるべきですか？
ネットワークアクセスは必要ですか？
開発者情報
作成者
heygen-comライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
0519034dad657fb1f7706e0550e962beeda73fdf
メンテナンスの新しさ
2026/7/18
利用状況
2 ダウンロード · 29 閲覧
ファイル構成
📄 SKILL.md