1. The .infinity-animation class sets the position, size, and animation properties for the main element. 2. The ::before and ::after pseudo-elements are used to create the two circles that make up the infinity symbol. 3. The border, border-radius, and box-sizing properties are used to style the circles. 4. The animation property is used to define the animation, which moves the circles up and down in an infinite loop. 5. The @keyframes rule defines the animation itself, with the circles moving up and down by 20% of their height. 6. The animation-direction property is used to make the ::after pseudo-element move in the opposite direction to the ::before pseudo-element, creating the infinity effect.
You may like these posts :
2. The ::before and ::after pseudo-elements are used to create the two circles that make up the infinity symbol.
3. The border, border-radius, and box-sizing properties are used to style the circles.
4. The animation property is used to define the animation, which moves the circles up and down in an infinite loop.
5. The @keyframes rule defines the animation itself, with the circles moving up and down by 20% of their height.
6. The animation-direction property is used to make the ::after pseudo-element move in the opposite direction to the ::before pseudo-element, creating the infinity effect.