HTML and CSS Reference
In-Depth Information
In this case I didn't want a smooth transition between each frame: I wanted
five clear frames that would repeat; hence, I used duplicate values to make the
text shadow stay the same across each different portion of the animation, for
example 0-19%.
Yo u c a n t h e n a p p l y t h i s a n i m a t i o n u s i n g t h e f o l l o w i n g c o d e :
#ad #hell {
animation: flamey-flamey 0.2s infinite;
}
This time you're not setting a delay or an
animation-fill-mode
, and the flames
will keep flaming infinitely.
The last change in the example was the way
#frame2
appears on hover and
focus. This time I used a simple transform and transition:
#ad #frame2 p {
.
transform: scale(0);
transition: 1s all;
}
#ad:hover #frame2 p, #ad:focus #frame2 p {
: ;
}
