{"id":"250dc134-16ba-4d26-91f8-0e75ce36f561","slug":"clawhub-lucas-kay8-css-animations","name":"Css Animations","description":"CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or...","canonicalUrl":"https://www.xpersona.co/agent/clawhub-lucas-kay8-css-animations","sourceUrl":"https://clawhub.ai/lucas-kay8/css-animations","homepage":"https://clawhub.ai/lucas-kay8/skills/css-animations","source":"CLAWHUB","vendor":{"slug":"clawhub","label":"Clawhub","url":"https://clawhub.ai/lucas-kay8/skills/css-animations"},"protocols":["OPENCLEW"],"capabilities":[],"trustScore":null,"trustConfidence":"unknown","artifactCount":0,"benchmarkCount":0,"lastRelease":"1.0.0","freshnessAt":"2026-10-11T08:23:35.742Z","freshnessLabel":"Oct 11, 2026","securityReviewed":true,"openapiReady":false,"stats":[{"label":"Trust score","value":"Unknown"},{"label":"Compatibility","value":"OpenClaw"},{"label":"Freshness","value":"Oct 11, 2026"},{"label":"Vendor","value":"Clawhub"},{"label":"Artifacts","value":"0"},{"label":"Benchmarks","value":"0"},{"label":"Last release","value":"1.0.0"}],"factsPreview":[{"factKey":"vendor","category":"vendor","label":"Vendor","value":"Clawhub","href":"https://clawhub.ai/lucas-kay8/skills/css-animations","sourceUrl":"https://clawhub.ai/lucas-kay8/skills/css-animations","sourceType":"profile","confidence":"medium","observedAt":"2026-10-11T08:23:35.807Z","isPublic":true},{"factKey":"protocols","category":"compatibility","label":"Protocol compatibility","value":"OpenClaw","href":"https://www.xpersona.co/api/v1/agents/clawhub-lucas-kay8-css-animations/contract","sourceUrl":"https://www.xpersona.co/api/v1/agents/clawhub-lucas-kay8-css-animations/contract","sourceType":"contract","confidence":"medium","observedAt":"2026-10-11T08:23:35.807Z","isPublic":true},{"factKey":"traction","category":"adoption","label":"Adoption signal","value":"1.1K downloads","href":"https://clawhub.ai/lucas-kay8/css-animations","sourceUrl":"https://clawhub.ai/lucas-kay8/css-animations","sourceType":"profile","confidence":"medium","observedAt":"2026-10-11T08:23:35.807Z","isPublic":true},{"factKey":"latest_release","category":"release","label":"Latest release","value":"1.0.0","href":"https://clawhub.ai/lucas-kay8/css-animations","sourceUrl":"https://clawhub.ai/lucas-kay8/css-animations","sourceType":"release","confidence":"medium","observedAt":"2026-05-20T11:21:41.473Z","isPublic":true},{"factKey":"handshake_status","category":"security","label":"Handshake status","value":"UNKNOWN","href":"https://www.xpersona.co/api/v1/agents/clawhub-lucas-kay8-css-animations/trust","sourceUrl":"https://www.xpersona.co/api/v1/agents/clawhub-lucas-kay8-css-animations/trust","sourceType":"trust","confidence":"medium","observedAt":null,"isPublic":true}],"highlights":["1.1K downloads","Trust evidence available"],"agentCard":{"name":"Css Animations","description":"CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or...","source":"CLAWHUB","sourceId":"clawhub:s1761m7dq1gcshz013v85wrpg586z1tn:css-animations","homepage":"https://clawhub.ai/lucas-kay8/skills/css-animations","repository":"https://clawhub.ai/lucas-kay8/css-animations","documentation":"https://www.xpersona.co/agent/clawhub-lucas-kay8-css-animations","protocols":["OPENCLEW"],"examples":[{"kind":"example","language":"html","snippet":"<div\n  id=\"pulse-ring\"\n  class=\"clip pulse-ring\"\n  data-start=\"0\"\n  data-duration=\"4\"\n  data-track-index=\"2\"\n></div>\n\n<style>\n  .pulse-ring {\n    width: 280px;\n    height: 280px;\n    border: 4px solid rgba(255, 255, 255, 0.7);\n    border-radius: 50%;\n    animation-name: pulse-ring;\n    animation-duration: 1200ms;\n    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);\n    animation-iteration-count: 3;\n    animation-fill-mode: both;\n  }\n\n  @keyframes pulse-ring {\n    from {\n      opacity: 0;\n      transform: scale(0.82);\n    }\n    35% {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n      transform: scale(1.18);\n    }\n  }\n</style>"},{"kind":"example","language":"html","snippet":"<div class=\"clip dots\" data-start=\"1\" data-duration=\"3\" data-track-index=\"3\">\n  <span style=\"--i: 0\"></span>\n  <span style=\"--i: 1\"></span>\n  <span style=\"--i: 2\"></span>\n</div>\n\n<style>\n  .dots span {\n    display: inline-block;\n    width: 18px;\n    height: 18px;\n    margin-right: 10px;\n    border-radius: 50%;\n    background: currentColor;\n    animation: dot-pop 900ms ease-out both;\n    animation-delay: calc(var(--i) * 120ms);\n  }\n\n  @keyframes dot-pop {\n    from {\n      opacity: 0;\n      transform: translateY(18px) scale(0.75);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n</style>"}]}}