How to play with css animation? (organize and share)

WBOY
Release: 2021-12-21 18:47:26
forward
1985 people have browsed it

This article brings you relevant knowledge about animation in CSS, including what animation is, how to call animation, and how to implement multi-keyframe animation. I hope it will be helpful to you.

How to play with css animation? (organize and share)

1. What is animation

In CSS, you can use @keyframes to define animation
(keyframes means " Keyframe")

General structure:

@keyframes rotation { /* rotation 动画名 */
    from {   /* 起始状态 */ 
        transform: rotate(0);
    }
    to {    /* 结束状态 */ 
        transform: rotate(360deg);
    }}
Copy after login

2. Calling animation

After defining the animation, you can use the animation attribute to call the animation.

Basic attributes of animation:

  • name: the name of the animation
    (initial default value none)
  • duration: animation duration
    (initial default value 0s)
  • timing function: change speed curve
    (initial default value ease)
  • delay: delay time (how much time passes before the animation starts)
    (initial default value 0s)
  • iteration-count: Number of animation executions
    (Initial default value 1, if you want the animation to execute forever, write infinite)
animation:  name | duration | timing function | delay | iteration-count;
Copy after login

In addition, there are some attributes :

animation-direction (Set whether to play the animation in reverse in turn)

  • normal: Play the animation in the normal way (initial default value)
  • reverse: Play the animation in the opposite way
  • alternate: Let the 2nd, 4th, 6th... (even-numbered times) of the animation be automatically reversed
  • alternate-reverse: Let the odd numbers of the animation be executed Automatic reverse execution

animation-fill-mode (set the state of the animation when the animation is not playing)

  • none: No Change the default behavior of animation
  • forwards: Stop the animation at the final end state
  • backwards: Apply the style in the first keyframe of the animation during the time period specified by animation-delay
  • both: Follow the rules of forwards and backwards at the same time

animation-play-state (set whether the animation is played or paused)

  • paused: Pause animation playback
  • running: Play animation normally

3. Multi-keyframe animation

For those who want to achieve multiple For animation with this effect, you can use multiple keyframes at this time.

General structure:

@keyframes changeColor {
	0% {
		background-color: red;
	}
	20% {
		background-color: orange;
	}
	40% {
		background-color: blue;
	}
	100% {
		background-color: green;
	}}
Copy after login

(Learning video sharing: css video tutorial)

The above is the detailed content of How to play with css animation? (organize and share). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template