简体中文 | English

AnimateToCSS is an Adobe After Effects plugin developed by a designer that exports AE animations directly to HTML + CSS code with browser preview capability. It also provides one-click access to keyframe animation data from selected layers, making the designer-to-developer handoff process more efficient than ever. Why not give it a try?

• Key Features
• System Requirements
• Installation
  • Method 1: Using ZXP Installer
  • Method 2: Manual Installation
  • Enable Plugin
• Features
  • Two Export Modes
  • Multi-language Support
• Usage Guide
  • 1. Mark Layers
  • 2. Export Animation
  • 3. Check Status
  • 4. Get Keyframe Information
• Common Issues
• Feedback & Donate

• Support for Keyframe Export
• Quick Access to Layer Keyframe Information
• Multiple Properties Support: Position, Scale, Rotation, Opacity, Precomps and Parent-child Relationships
• Developer Friendly: Generate clean, maintainable CSS code with cubic-bezier timing functions
• Multi-language Support: Available in 20+ languages including Chinese, English, Japanese, and more

after-effects-plugin css-animation motion-design animation-export web-animation designer-tools developer-tools ae-to-css keyframe-animation motion-graphics animation-workflow design-handoff front-end-development creative-tools adobe-extension

• Key Features
• System Requirements
• Installation
  • Method 1: Using ZXP Installer
  • Method 2: Manual Installation
  • Enable Plugin
• Features
  • Two Export Modes
  • Multi-language Support
• Usage Guide
  • 1. Mark Layers
  • 2. Export Animation
  • 3. Check Status
  • 4. Get Keyframe Information
• Common Issues
• Feedback & Support

• Adobe After Effects 2022 (other versions haven't been tested yet)

1. Download and install ZXP Installer

2. Install the plugin

   • Download ZXP package animateToCSS.zxp
   • Open ZXP Installer
   • Drag the downloaded animateToCSS.zxp file into the ZXP Installer window
   • Or click the "File" menu button to select the animateToCSS.zxp file
   • Wait for installation to complete

1. Download ZIP package animateToCSS.zip

2. Extract the ZIP file into a folder

3. Copy the folder to After Effects extensions directory:

   • Windows

   C:\Program Files\Adobe\Common\CEP\extensions 

   or user directory (recommended):

   C:\Users\[username]\AppData\Roaming\Adobe\CEP\extensions 

   • macOS

   /Library/Application Support/Adobe/CEP/extensions 

1. Restart After Effects
2. Menu Bar -> Window -> Extensions -> AnimateToCSS

Select the layers you want to export and click the mark button. Unsupported layers will be marked in red.

Click the "Export Animation" button to generate HTML+CSS code.

If issues occur, you can check the export content and warning messages in the status panel. Click to locate the layer in AE.

Select a layer and click "Get Keyframe Info" to view and copy animation data Including: animation start time, keyframe times, keyframe values, bezier values, and animation duration.

If you encounter any issues or have suggestions for improvement, please feel free to:

1. Submit an issue - Report bugs or request features
2. View existing issues - Check if your issue has already been reported

1. Click the "Submit an issue" link above
2. Choose the "Bug Report" template
3. The template will load automatically with the following sections:
   • Bug Description: Describe the issue in detail
   • Steps to Reproduce: List the specific steps to reproduce the issue
   • Expected Behavior: Explain what you expected to happen
   • Environment: Fill in your system and software versions
   • Additional Context: Optional screenshots or extra information

• Please provide as much information as possible so I can locate the issue quickly
• Include screenshots or error messages if available
• Before submitting, check existing issues to avoid duplicates

If you find this project helpful, feel free to buy me a coffee!