CSS Animation: Fade In and Out with Opacity - Infinite Loop in 3 Seconds

You can achieve a CSS animation that transitions an element from opacity 1 to 0.3 infinitely and within 3 seconds using the following code: css

@keyframes fade {

0% {

opacity: 1; 

}

50% {

opacity: 0.3; 

}

100% {

opacity: 1; 

}

}

.element {

animation: fade 3s infinite;

}

In this code, @keyframes is used to define the animation called "fade". It has three keyframes: 0%, 50%, and 100%. At 0%, the opacity of the element is 1. At 50%, the opacity changes to 0.3. Finally, at 100%, the opacity returns to 1.

The .element class is then assigned the animation property, which applies the "fade" animation with a duration of 3 seconds and set to repeat infinitely.