animation 停留在最后一帧逐字显示

最新推荐文章于 2023-06-20 14:53:59 发布

A-fish

最新推荐文章于 2023-06-20 14:53:59 发布

阅读量3.3k

点赞数

分类专栏：杂记 CSS3 文章标签：停留最后一帧 animation 逐字展示 animation-fill-mode

本文链接：https://blog.csdn.net/sally18/article/details/90719407

版权

杂记同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

CSS3

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
   <title>逐次展示动画停留在最后一帧</title>
   <style type="text/css">
       .animation{
       animation:mymove 5s linear;
       animation-fill-mode: forwards; /*该属性让动画停留在最后一帧*/
       }
       @keyframes mymove{
       0%{
       width:100%;
       }
       50%{
       width:50%;
       }
       100%{
       width:0%;
       }
       }
   </style>
</head>
<body>
<p style="position: relative">我有一头小毛驴，我从来都不骑，有一天我 ...<span class="animation" style="width:100%;height:100%;display: inline-block;position:absolute;top:0px;right:0px;background-color: #fff"></span></p>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

A-fish

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
animation 停留在最后一帧逐字显示

<!DOCTYPE html><html><head> <title>逐次展示动画停留在最后一帧</title> <style type="text/css"> .animation{ animation:mymove 5s linear; ...
复制链接

扫一扫