CSS Tutorial

The language for styling web pages.

CSS Animations

CSS animations allow animation of most HTML elements without JavaScript. An animation lets an element gradually change from one style to another. You can change as many CSS properties as you want, as many times as you want.

Animation Properties:

@keyframes - Defines the animation
animation-name - Name of keyframe
animation-duration - How long
animation-iteration-count - infinite / number
animation-timing-function - ease / linear
animation-direction - normal / reverse / alternate

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family:Arial; text-align:center; padding:30px; }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-40px); }
  }
  @keyframes colorChange {
    0%   { background-color: #1572B6; }
    25%  { background-color: #28a745; }
    50%  { background-color: #dc3545; }
    75%  { background-color: #ffc107; }
    100% { background-color: #1572B6; }
  }
  @keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  .ball { width:60px; height:60px; background:#1572B6; border-radius:50%; margin:20px auto; animation: bounce 1s ease infinite; }
  .color-box { width:120px; height:60px; margin:20px auto; border-radius:10px; animation: colorChange 3s linear infinite; }
  .spinner { width:50px; height:50px; border:5px solid #f0f0f0; border-top-color:#1572B6; border-radius:50%; margin:20px auto; animation: spin 0.8s linear infinite; }
</style>
</head>
<body>
  <h3>Bouncing Ball</h3>
  <div class="ball"></div>
  <h3>Color Change</h3>
  <div class="color-box"></div>
  <h3>Spinner</h3>
  <div class="spinner"></div>
</body>
</html>

Result

Topics

CSS Introduction CSS Syntax CSS Selectors CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Box Model CSS Text CSS Fonts CSS Display CSS Position CSS Flexbox CSS Grid CSS Transitions CSS Animations CSS Media Queries CSS Variables CSS Gradients CSS Shadows CSS 2D Transforms CSS 3D Transforms CSS Pseudo-classes CSS Pseudo-elements CSS Float CSS Overflow CSS Z-index CSS Opacity CSS Buttons

CSS Tutorial

Course Topics

CSS Animations

CSS Animations

Animation Properties:

Try It Yourself

Topics