CSS Animation: Magic that gives websites vitality and dynamic

CSS animation is like magic, making the website more energetic and attractive. Through animation, you can easily move the website elements, change its color and adjust its size smoothly.

In order to make your animation more interactive and smooth, you first need to understand the basic animation concept. In this article, you will learn the basic rules and animation attributes of animation to control the behavior of the animation.

Let's start! ?

To start using CSS animation, you need to understand two basic components:

• @Keyframes: The blueprint of animation.
Animation attributes:
• Control the setting of animation.
@Keyframes

@Keyframes is an animation roadmap. You can define the starting point and end of the animation and the steps between the animation.

This means that this part defines how the animation starts, how to run in the middle and how the animation end.

grammar:

For example:

<code>@keyframes animationName {
  from {
    /* 開始樣式 */
  }
  to {
    /* 結(jié)束樣式 */
  }
}</code>

In this example, the opacity of the element will start from 0 and then to 1.

Before continuing, please check this e -book, which will make you a CSS animation expert:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可見 */
  }
  to {
    opacity: 1; /* 可見 */
  }
}</code>

? CSS Animation Extract: Best Practice, Skills and Performance Tips

From simple fading out to complex animation, this e -book covers everything to master CSS animation, including:

timing function

Key frame and animation process

Performance optimization

The application of real world
• Developers who want to create a smooth CSS animation. Get your copy immediately!
• Animation attributes
In order to customize the CSS animation, different attributes are used. Each attribute has its own role and defines the behavior of animation.
The animation attribute is directly applied to the element, defining the name, duration, delay, direction, etc. of the animation.

grammar:

For example:

In this example, the elements named "BOX" will first be visible, and it will be visible after two seconds, which will produce a smooth and off -income effect. In CSS, you have the following animation attributes:

<code>.element {
  animation-name: fadeIn; /* 動(dòng)畫名稱或@keyframes */
  animation-duration: 2s; /* 動(dòng)畫持續(xù)時(shí)間 */
}</code>

Animation-name Animation-duration

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 動(dòng)畫名稱 */
   animation-duration: 2s; /* 動(dòng)畫持續(xù)時(shí)間 */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* 不可見 */
   }
   to {
     opacity: 1; /* 可見 */
   }
}</code>

Animation-Timing-Function

Animation-delay

Animation-ITeration-COUNT

• Animation-Direction
• Animation-Fill-Mode
• Animation-PLAY-State
Now, let us understand each attribute.
Animation-name
Function:
• This attribute is used to define which @Keyframes animation should be applied.

For example, if you have two @Keyframes named fadein or fadeout, you can use the Animation-name property definition which element should apply Fadein animation in which element.

grammar:

For example:

Animation-name attribute is necessary for running animation.

Animation-duration

Function:

This attribute defines the duration of animation, that is, how long the animation is running.

You can define the animation duration as a unit in seconds (s) or milliseconds (ms).

grammar:

<code>@keyframes animationName {
  from {
    /* 開始樣式 */
  }
  to {
    /* 結(jié)束樣式 */
  }
}</code>

For example:

If you are not defined with Animation-Duration, it will automatically set to 0s (default value), which will cause the animation to fail.

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可見 */
  }
  to {
    opacity: 1; /* 可見 */
  }
}</code>

Animation-Timing-Function Function:

This attribute is used to define the speed mode of animation. This means that you can use this attribute to define whether the animation is slow, run at a constant speed or run quickly.

It has the following values:

Linear: The animation will run at a constant speed.

Ease: Start slowly, fast in the middle, and end slowly.

Ease-in: Start slowly.
Ease-OUT: Slowly end.
Ease-in-OUT: Start and end slowly.
Cubic-Bezier (X1, Y1, X2, Y2): Custom speed mode.
• Example:

Animation-delay

Function:

<code>.element {
  animation-name: fadeIn; /* 動(dòng)畫名稱或@keyframes */
  animation-duration: 2s; /* 動(dòng)畫持續(xù)時(shí)間 */
}</code>

How long will this attribute definition animation wait before starting, that is, the delay of animation.

grammar:

Example:

Animation-ITeration-COUNT

Function:

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 動(dòng)畫名稱 */
   animation-duration: 2s; /* 動(dòng)畫持續(xù)時(shí)間 */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* 不可見 */
   }
   to {
     opacity: 1; /* 可見 */
   }
}</code>

This attribute is used to define the repeated number of animation, that is, how many times the animation will be repeated.

It has the following values:

<code>animation-name: animationName;</code>

1: The animation will only run once (this is the default value).

Infinite: The animation will be repeated.

Any number: The animation will run the number of times you define.

Example:

Animation-Direction
Function:

This attribute defines the direction of animation.

It has the following values:

<code>animation-name: fadeIn;</code>

NORMAL: The animation will run forward (this is the default value).

Reverse: The animation will run in reverse.

Alternate: The animation will run alternately, one move forward, once.

Alternate-Reverse: The animation will first run in the reverse and then run forward.

Example:

Animation-Fill-Mode
Function:
• This attribute is used to define the element style before and after the start of the animation. It defines which styles should be applied to elements when the animation is not played.

It allows you to control the appearance of the element before and after the animation, so that you are more flexible when managing the state of element during the animation process.

It has the following values:

<code>animation-duration: time;</code>

None: No style is used before and after the animation.

Forwards: Keep the end of the animation.

Backwards: This will also apply the starting style of the animation within the delay time.

Both: Treatment to start and end.

Example:

Animation-PLAY-State
Function:
• This attribute specifies the status of animation: run or pause.
• It has the following values:
• running: The animation will continue.
• paused: The animation will be stopped but the state will be retained.

Example:

<code>@keyframes animationName {
  from {
    /* 開始樣式 */
  }
  to {
    /* 結(jié)束樣式 */
  }
}</code>

This property is used for interactive animations, for example, pausing animations on hover.

Animation shorthand syntax

Animation shorthand allows you to define multiple animation properties in one line. You can combine them into one line to improve readability instead of writing each animation property one by one.

Grammar:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可見 */
  }
  to {
    opacity: 1; /* 可見 */
  }
}</code>

Example:

<code>.element {
  animation-name: fadeIn; /* 動(dòng)畫名稱或@keyframes */
  animation-duration: 2s; /* 動(dòng)畫持續(xù)時(shí)間 */
}</code>

Here,

• slide: The name of the animation.
• 3s: The animation duration is 3 seconds.
• ease-in-out: The timed function is ease-in-out, which means the animation will start slowly, speed up, and then slow down again.
• 1s: The animation will start after a 1 second delay.
• infinite: The animation will repeat infinitely.
• alternate: The animation will alternate between moving forward and backward on each iteration.
• forwards: The styles that were applied at the last keyframe (at 100%) will be retained after the animation is complete.

Animation Cheat Sheet

I've created a comprehensive CSS Animation Cheat Sheet that covers all the key concepts, properties, and syntax used in CSS animations.

You can download the cheat sheet on GitHub by clicking the link below:

http://ipnx.cn/link/02f5df8adf0db026d38425594e68a007

That’s it.

I hope it helps.

Thank you for reading.

If you find my articles helpful and would like to support my work, please consider buying me a coffee?.

For more content like this, click here.

Follow me on X (Twitter) for daily web development tips.

Keep coding! !

The above is the detailed content of Mastering CSS Basic Animation Concepts. For more information, please follow other related articles on the PHP Chinese website!