# Share Animation with Developer: Complete Developer Handoff Guide **Previous:** [Export Your Animation to Different Formats](https://aninix.com/guides/export-animation-formats) | **Next:** [Sync Changes](https://aninix.com/guides/sync-changes) > **Note:** This guide covers sharing animation specifications for Web, Mobile or CSS implementation. If you want to export your animation as ready-to-use Lottie, GIF, or video files, refer to the [Export Animation Formats](https://aninix.com/guides/export-animation-formats) guide instead. Once you've created your perfect animation in Aninix, it's time to share it with your development team. The developer handoff feature generates ready-to-use CSS code and detailed specifications that make implementing your animations seamless. ## Why Use Developer Handoff? Developer handoff bridges the gap between design and development by providing: - **Ready-to-use CSS code** with all keyframes and timing functions - **Detailed specifications** for each animated element - **Interactive inspection tool** for developers to explore animation properties - **Seamless collaboration** between designers and developers ## Step 1: Access the Share Feature In your Aninix project, locate and click the `Share` button in the top toolbar. ## Step 2: Copy the Specification Link Click `Copy specification link` to copy the developer handoff link to your clipboard:  This link contains all the information your development team needs to implement your animation. ## Step 3: Share with Your Development Team Share the copied link with your developers. The link provides access to an interactive handoff tool where they can: - Inspect individual elements and their properties - View animation timing and easing functions - Access generated CSS code for each element ## Step 4: Developer Inspection Developers can use the handoff tool to inspect individual elements and their properties:  The inspection tool shows: - Element dimensions and positioning - Animation properties and values - Timing functions and durations - Layer hierarchy and relationships ## Step 5: Generated CSS Code The handoff tool automatically generates ready-to-use CSS code for each animated element:  Developers can copy this generated CSS code directly into their project without any modifications. ## Step 6: Implementation The generated code includes all necessary: - **Keyframes** with precise timing and values - **Animation properties** including duration, easing, and delay - **CSS selectors** that match your design structure - **Cross-browser compatibility** for modern web browsers ## Benefits for Development Teams ### For Designers: - No need to manually write animation specifications - Automatic generation of accurate CSS code - Real-time updates when animation changes - Clear communication of design intent ### For Developers: - Ready-to-use CSS code with no guesswork - Interactive inspection of animation properties - Consistent implementation across team members - Reduced back-and-forth communication ## Best Practices - **Share Early:** Involve developers in the animation review process - **Test Implementation:** Verify the generated CSS works in your target browsers - **Document Context:** Provide additional context about when and how animations should trigger - **Iterate Together:** Use the handoff tool for collaborative refinement ## Troubleshooting **Link Not Working?** - Ensure your project is saved and published - Check that sharing permissions are enabled - Verify the link was copied completely **CSS Not Working?** - Check that all required HTML elements exist - Verify CSS selectors match your markup - Ensure no conflicting styles override the animation ## What's Next? Need to make changes to your animation after sharing? Learn how to [sync changes](https://aninix.com/guides/sync-changes) between your Figma design and Aninix project to keep your handoff up-to-date. You can also go back to learn more about [exporting in different formats](https://aninix.com/guides/export-animation-formats) or [previewing Lottie animations](https://aninix.com/guides/preview-lottie-animation). --- - **Next:** [Sync Changes](https://aninix.com/guides/sync-changes)