This mini-project is a part of my journey in exploring CSS animations.

• Animated Text Project
  • Overview
    • The challenge
    • Links
  • Screenshots
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author

• Create an engaging text animation where each line types out sequentially
• Ending with a pulsing heart emoji
• Ensure the design is responsive and accessible across different devices

• Repository: GitHub Repo
• Live Site URL: GitHub pages link

Desktop View

Mobile View

• Semantic HTML5 markup
• CSS custom properties
• CSS animations and keyframes
• Flexbox for layout

In this project, I explored several key CSS animation techniques:

• I learned how to use @keyframes to create animations, like text typing and a pulsing heart.
• Created animations with delays, steps, and loops to make the text appear line by line.

In future projects, I aim to:

• Experiment with more complex animations and transitions.
• Enhance interactivity with JavaScript.
• Further improve accessibility features.

• CSS Tricks - Keyframe Animation Syntax
• MDN Web Docs - Using CSS animations
• WebAIM - Contrast Checker

• LinkedIn - @Doina