css3动画之后一次后保持最后状态

最新推荐文章于 2024-07-11 10:24:06 发布

sunsineq

最新推荐文章于 2024-07-11 10:24:06 发布

阅读量2.2k

点赞数 2

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/sunsineq/article/details/107342161

版权

CSS 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

animation-fill-mode:forwards这个属性可以在动画完成后将动画最后的状态应用到元素上

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:100px;
height:100px;
background:red;
/ position:relative;/
animation:mymove 3s;
animation-iteration-count:1;
animation-fill-mode:forwards;

/* Safari 和 Chrome */
-webkit-animation:mymove 3s;
-webkit-animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;

}

@keyframes mymove
{
from {width:1%;}
to {width:100%;}
}

@-webkit-keyframes mymove / Safari 和 Chrome /
{
from {width:1%;}
to {width:100%;}
}
</style>
</head>
<body>


<p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p>


<div></div>


</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sunsineq

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
css3动画之后一次后保持最后状态

animation-fill-mode:forwards这个属性可以在动画完成后将动画最后的状态应用到元素上<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div{width:100px;height:100px;background:red;/position:relative;/animat..
复制链接

扫一扫