首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为什么@keyframe动画只工作一次?

为什么@keyframe动画只工作一次?
EN

Stack Overflow用户
提问于 2019-09-26 11:54:26
回答 1查看 52关注 0票数 1

所以我用@keyframe动画删除了css代码中最后一个问题的答案中的不透明度,由于某些原因,它只起作用一次。帮助?

代码语言:javascript
运行
复制
header {
transition: height 600ms ease-in;
animation: yourAnimation 1s forwards 1s ease;

/* Define the dropdown-content transition styles on opacity, where
the opacity delay causes opacity of menu items to change after menu
animation (of 1sec) is complete */
.dropdown-content  {
display: grid;
    animation: yourAnimation 1s forwards 1s ease;
}

/* CSS modifier class for "header.open" causes height to change
when open class applied */
&.open {
height: 100%;
grid-template-rows: 50px 400px;
grid-row-gap: 20px;
grid-template-areas: 'dp logo start' 'dc dc dc';
}

/* When open modifier class applied to parent header, items in the
.dropdown-content child are set to be opaque/visible */
&.open .dropdown-content {
opacity: 1.0;
    animation: yourAnimation 1s forwards 1s ease;
}
}

JSFiddle:https://jsfiddle.net/lambsbaaacode/1bxnzcsr/

EN

回答 1

Stack Overflow用户

发布于 2019-09-26 16:44:36

您需要设置迭代次数:

代码语言:javascript
运行
复制
animation-iteration-count: 2; // 0-infinite

https://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58109341

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档