Simple CSS animation tutorial for beginners

The key to CSS animation is to master the use of @keyframes and animation attributes. 1. @keyframes is used to define animation keyframes, and set the state of different stages of the animation through from/to or percentage; 2. The animation attribute applies animation to elements, including settings such as name, duration, easing function, delay and number of playbacks; 3. The code can be simplified by abbreviated attributes, and the effect of staggered playback of multiple elements is achieved using animation-delay; 4. Pay attention to browser compatibility, performance optimization, triggering methods and keeping animations simple. By mastering these core points, you can easily create smooth and beautiful CSS animations.

CSS animation is actually not that difficult, especially for beginners. As long as you master the basic structure and several key attributes, you can create a smooth and beautiful effect. This article will start with the simplest example and help you understand how to use CSS to make animations.

1. First find out what @keyframes is

If you want to do animation, you must first learn to define keyframes. @keyframes is used to tell the browser what animation should look like at different stages.

For example, if you want to make an animation of a small square moving from left to right, you can write it like this:

 @keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

You can also use percentages to control a finer rhythm, such as:

 @keyframes fadeIn {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

Remember: @keyframes just defines "what the animation looks", but has not been applied to any elements yet.

2. Add animation to the element

After defining the animation, the next step is to use it on a certain element. This requires the use of the animation attribute or its sub-properties.

For example, if you want a div to move, you can write it like this:

 .box {
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
}

These properties control:

• Animation name (must be consistent with @keyframes ' name)
• Duration
• Easing function (speed change method)
• How long does it take to start
• How many times does the animation play (infinite means infinite loop)

Of course you can also abbreviate it as one line:

 animation: move 2s ease-in-out 0.5s infinite;

3. Simple and practical example: loading animations

Newbies can practice from a common loading animation - the kind that appears and disappears in sequence.

The HTML structure is roughly like this:

 <div class="loader">
  <span>.</span>
  <span>.</span>
  <span>.</span>
</div>

Then the CSS animation can be written like this:

 @keyframes blink {
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

.loader span {
  display: inline-block;
  animation: blink 1.4s infinite ease-in-out both;
}

.loader span:nth-child(2) {
  animation-delay: 0.2s;
}

.loader span:nth-child(3) {
  animation-delay: 0.4s;
}

The key to this example is to use different animation-delay for each point to achieve the staggered effect.

4. Pay attention to a few places that are easy to ignore

• Browser Compatibility : Most modern browsers support animation , but if you want to be compatible with older versions of IE, you may need to add -webkit- or other prefix.
• Performance issues : Don’t add complex animations to too many elements, as they will affect the performance of the page.
• Triggering method : The default animation is executed when the page is loaded. If you want to move only when clicking or hovering, you can use :hover or JS to control it.
• Keep it simple : Don’t pursue complex effects at the beginning, it’s more important to master the basic structure first.

Basically that's it. CSS animations look a bit more attributes, but just remember @keyframes to define actions, animation control playback, and combine them with some common attributes to create good animations easily.

The above is the detailed content of Simple CSS animation tutorial for beginners. For more information, please follow other related articles on the PHP Chinese website!