Css text gradually into animation

Answer 1

The following is a way to achieve the animation of the text:

First, create a container element (for example, named `container`), set its width and center it horizontally, such as `width: 500px; margin: 50px auto;`. Then, create an element for displaying text (for example, the name is `text`), set its font size, bold, color, and other styles, and set its initial clarity to 0. Then, use the `transition` attribute to set the transition effect of the change in clarity, such as `Opacity: 0; transition: Opacity 0.5s ease-in- out;`.

Then, use multiple `span` elements inside the `text` element to contain each letter. Set the initial clarity of each `span` element to 0 and set the same transition effect. Finally, use the pseudo-class picker `:hover` to define the style of the mouse sliding in. When the mouse glides into the `text` element, set its degree of clarity to 1 to make it gradually slide in. When the mouse glides into the `span` element, set its degree of clarity to 1 to make it gradually slide in.

The sample code is as follows:

```html

.container {
width: 500px;
margin: 100px auto;
text - align: center;
border: 1px solid gray;
border - radius: 30px;
}

.text {
font - size: 50px;
font - weight: bold;
color: deepskyblue;
opacity: 0;
transition: opacity 0.5s ease - in - out;
}

.text span {
display: inline - block;
opacity: 0;
transition: opacity 0.5s ease - in - out;
}

.text:hover span {
opacity: 1;
}

.text:hover {
opacity: 1;
}