How to use css3 to achieve a text printing effect

foreword

On the home page of many websites, in order to attract users and stay longer, some css3 animations are used

example effect

text printing.gif

Implement this animation principle

To achieve this animation, change the width of the element, combined with animation css3 keyframes

The specific code is as follows

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css3实现打字机效果</title>
<style>
.example-css3dayin {
        text-align: center;
        font-weight: 700;
        font-size: 60px;
        line-height: 79px;
        background: linear-gradient( 270deg, rgba(198, 141, 255, 0.9) 8.92%, #5685ff 46.17%, #48d6ff 92.17% );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        white-space: nowrap;
        animation: animateText 4.7s steps(8) infinite;
        -webkit-animation: animateText 4.7s steps(8) infinite;
}

@-webkit-keyframes animateText {
        0% {
            width: 0;
        }
        35% {
            width: 8.1em;
        }
        75% {
            width: 8.1em;
        }
        100% {
            width: 0;
        }
   }
    
    @keyframes animateText {
        0% {
            width: 0;
        }
        35% {
            width: 8.1em;
        }
        75% {
            width: 8.1em;
        }
        100% {
            width: 0;
        }
   }      

    </style>
  </head>
  <body>
       <p class="example-css3dayin">AI智能，引领未来</p>
  </body>
</html>

Keyframe animation in effects

animationAnimation precisely controls one or a group of animations by setting multiple nodes, and is often used to achieve complex animation effects;

Compared with transition animation, animationanimation can achieve more changes, more control, and automatic playback and other effects

Animating animationrequires two steps

The first step is to define the animation first. When it is 0%, we generally recommend not to set anything. The default is the initial style.

@keyframes 动画名称 {

    0% {

        开始动画

    }

    100% {

        结束动画

    }

}

In the second step, the defined animation needs to be called to take effect. Which box needs to call the animation, set the following two necessary properties

animation-name: 动画名称;

animation-duration: 持续时间（单位是s）

For example the animation above

.example-css3dayin {
        // 上面省略
        animation: animateText 4.7s steps(8) infinite;
        -webkit-animation: animateText 4.7s steps(8) infinite;
}

@-webkit-keyframes animateText {
        0% {
            width: 0;
        }
        35% {
            width: 8.1em;
        }
        75% {
            width: 8.1em;
        }
        100% {
            width: 0;
        }
   }
    
    @keyframes animateText {
        0% {
            width: 0;
        }
        35% {
            width: 8.1em;
        }
        75% {
            width: 8.1em;
        }
        100% {
            width: 0;
        }
   }

0% is the start of the animation, 100% is the completion of the animation, and the rule to complete the entire animation process is the animation sequence;

The definition of animation can also be defined by fromand to, which is equivalent 0%to100%

@keyframesA css style is stipulated in , and the process of gradually changing the current style to a new style is called animation. We can change any style and change any number of times

CSS3 Animation Common Properties

@keyframes: specifies the animation
animation: Shorthand property for all animation properties except animation-play-statethe property .
animation-name: specifies the name of @keyframesthe animation . (must have).
animation-duration: Specifies the seconds or milliseconds it takes for the animation to complete a cycle. The default is 0. (must have).
animation-timing-function: Specifies the speed curve of the animation. The default is " ease".
animation-delay: Specifies when the animation starts. The default is 0. The unit s must be written.
animation-iteration-count: Specifies the number of times the animation is played. The default is 1. cycle is infinite;
animation-direction: Specifies whether the animation will play backwards on the next cycle. The default is " normal". alternatereverse
animation-play-state: Specifies whether the animation is running or paused. Default is " running", suspend is paused.
animation-fill-mode: Specifies the state of the object outside of the animation time. Keep the status quo forwards, go back to the beginningbackwards

animation-timing-function

animation-timing-function: linear, the speed of the animation is the same from start to finish.
animation-timing-function: ease, the default. The animation starts at a low speed, speeds up, and slows down before ending.
animation-timing-function: ease-in, the animation starts at a low speed.
animation-timing-function: ease-out, the animation ends at a low speed.
animation-timing-function: ease-in-out, the animation starts and ends at a low speed.
animation-timing-function: steps(step number setting), let the animation complete in a few steps within the specified time

CSS3 animation shorthand

animation: 动画名称  持续时间  运动曲线   何时开始（延时） 播放次数  是否反向播放  动画结束后的状态
animation: name duration timing-function delay iteration-count direction fill-mode
animation: animateText 4.7s steps(8) infinite;

Notice

When shorthand animation attributes, the animation name and animation duration must be written, and other attributes need to be written and omitted if not needed. If writing animation delay, the unit s must be written, even if it is 0s, it must be written

The duration and delay time are in sequence

Multiple animations are called at the same time

If an element needs to call multiple animations at the same time, we only need to use one animation, and separate different animations with English commas

animation: bear .3s steps(8) infinite;

 animation: move 1s ease forwards;
 // 可以合并到一起使用
 animation: bear .3s steps(8) infinite, move 3s ease forwards;

Summarize

CSS3 animation is a very powerful attribute, and there are many attribute values. Many animations seem to be very simple, but they can’t be written once they are written. We still need to imitate more and write more related animations.

After seeing the interesting effect, I will study it and apply it to the company's products and websites