效果展示

CSS3 animation（动画）属性

语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

• name
  • 设置绑定哪个keyframe
• duration
  • 设置动画多少秒或毫秒完成
• timing-function
  • 设置动画如何完成一个周期
• delay
  • 设置动画在启动前的延迟间隔。
• iteration-count
  • 定义动画的播放次数。
• direction
  • 指定是否应该轮流反向播放动画。
• fill-mode
  • 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
• play-state
  • 指定动画是否正在运行或已暂停。

详细参考：

【资料图】

CSS3 animation（动画） 属性

打字机效果的实现

实现一个字一个字移动效果的关键知识：

@keyframes typewriter {    to {        left: 100%;    }}animation: typewriter 3s steps(18) forwards;

• steps函数

  • 有两个参数。
    • 第一个参数的意思是，这个动画分成多少段执行。这里就是文本有几个字，就分多少段。
    • 第二个参数表示分成几段后，是start还是end去执行动画。参数二有两个可选值start和end，默认是end。（这里没有使用到）

• forwards（fill-mode属性）

  • 把物体动画地从一个地方移动到另一个地方，并让它停留在那里。

• 设置等宽字体

  • 如果每一个字的宽度不一样，就无法保证每次移动会正好一个字的宽度。

  • font-family: monospace;

实现光标闪烁效果的关键知识

@keyframes flashing {    to {        opacity: 0;    }}animation: flashing .3s ease-out forwards infinite; 

• ease-out
  • 动画以低速结束。
• forwards（fill-mode属性）
  • 把物体动画地从一个地方移动到另一个地方，并让它停留在那里。
• infinite
  • 指定动画播放无限次（永远）

代码示例

下列代码，使用了JS来动态获取文字的个数，从而设置相应的steps值。

思路是：

一个before伪元素来遮挡文字。

一个after伪元素来模拟闪烁的光标。

两个伪元素一起做动画向后移动。

                        
welcome to my home
    <script>        // 选中app元素        const app = document.querySelector("#app");        // 获取文本长度        const wordNum = app.outerText.length;        // 创建一个style标签        const styleElement = document.createElement("style");        styleElement.innerHTML = `#app::before {animation: typewriter ${wordNum * 0.2}s steps(${wordNum}) forwards;}`;        styleElement.innerHTML += `#app::after {animation: typewriter ${wordNum * 0.2}s steps(${wordNum}) forwards, flashing .3s ease-out forwards infinite;}`;                document.head.appendChild(styleElement);    </script>