css3 动画 forwards怎么用
1个回答
2016-08-01 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
举个例如下：
<head>
<style>
.test{
display:block;
width:100px;
height:20px;
border:1px solid #ff0000;
-webkit-animation:f0 2s 0.5s 1 linear;
-webkit-animation-fill-mode:forwards;
}
.test-high{
width:500px;
-webkit-animation:f1 2s 0.5s 1 linear;
-webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes f0{
0%{width:100px;}
100%{width:500px;}
}
@-webkit-keyframes f1{
0%{height:20px;}
100%{height:200px;}
}
</style>
</head>
<body>
<div>
<div class="test">会长大的</div>
<button type="button" onclick="goHigher()">变高一点</button>
<script>
function goHigher(){
document.getElementsByClassName("test")[0].className = "test test-high";
}
</script>
这里div.test会变宽到500px停住，当给他添加上test-high类时，会保持500px的宽度，在变高。
这可能就是想要的，关键是再下一个动画开始前将样式调整到上一个动画结束时一样。
<head>
<style>
.test{
display:block;
width:100px;
height:20px;
border:1px solid #ff0000;
-webkit-animation:f0 2s 0.5s 1 linear;
-webkit-animation-fill-mode:forwards;
}
.test-high{
width:500px;
-webkit-animation:f1 2s 0.5s 1 linear;
-webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes f0{
0%{width:100px;}
100%{width:500px;}
}
@-webkit-keyframes f1{
0%{height:20px;}
100%{height:200px;}
}
</style>
</head>
<body>
<div>
<div class="test">会长大的</div>
<button type="button" onclick="goHigher()">变高一点</button>
<script>
function goHigher(){
document.getElementsByClassName("test")[0].className = "test test-high";
}
</script>
这里div.test会变宽到500px停住，当给他添加上test-high类时，会保持500px的宽度，在变高。
这可能就是想要的，关键是再下一个动画开始前将样式调整到上一个动画结束时一样。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
AiPPT
2024-09-19 广告
随着AI技术的飞速发展，如今市面上涌现了许多实用易操作的AI生成工具1、简介：AiPPT: 这款AI工具智能理解用户输入的主题，提供“AI智能生成”和“导入本地大纲”的选项，生成的PPT内容丰富多样，可自由编辑和添加元素，图表类型包括柱状图...
点击进入详情页
本回答由AiPPT提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
