Academy HTML CSS JavaScript TypeScript SQL MongoDB Python NumPy Pandas PHP Java C C++ C# Bootstrap Tailwind CSS jQuery React Vue.js Node.js Git
❮ ❯

CSS Animations

Keyframe animations without JavaScript.

✍️ 3 exercises + code challenge in this lesson
❮ Previous Next ❯

CSS animations change styles over time using @keyframes.

  1. Define the steps: @keyframes pulse { from { ... } to { ... } } (or use percentages like 50% { ... }).
  2. Apply it: animation: pulse 2s infinite;

Animation properties

  • animation-name, animation-duration, animation-delay
  • animation-iteration-count: a number or infinite
  • animation-direction: normal, reverse, alternate
  • animation-timing-function, animation-fill-mode

Key Takeaways: CSS Animations

Mastering CSS Animations helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

CSS Animations Code Example

CSS 
<style>
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-40px); }
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes colors { 0% { background: #2563EB; } 50% { background: #14B8A6; } 100% { background: #E34F26; } }

  .ball   { width: 50px; height: 50px; border-radius: 50%; background: #2563EB; animation: bounce 1s ease-in-out infinite; margin-top: 50px; display: inline-block; }
  .loader { width: 40px; height: 40px; border: 5px solid #CBD5E1; border-top-color: #2563EB; border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; margin-left: 40px; }
  .banner { padding: 14px; color: white; border-radius: 10px; animation: colors 3s infinite alternate; margin-top: 20px; }
</style>

<div class="ball"></div>
<div class="loader"></div>
<div class="banner">Changing colours with @keyframes</div>
Free sign-in required · Google login available

CSS Animations Practice Exercises

Check what you learned in “CSS Animations”.

/ 3 solved
Fill in the blank

Define the steps of an animation.

@ fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
✓ Correct! Not quite. Try again.
Multiple choice

Which value makes an animation repeat forever?

✓ Correct! Not quite. Try again.
Code challenge

Apply the "spin" animation to .loader with a duration of 1s.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
❮ Previous
CSS Transforms
Next ❯
CSS Responsive Design

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services