Question

我在CSS延迟后动画资产，但一旦资产淡入，它就会消失。我最初设置隐藏的可见性，似乎这是动画后它停留的地方。如何防止资产消失，动画停止？

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>Ionic Template</title>

    <link href="http://code.ionicframework.com/0.9.25/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/0.9.25/js/ionic.bundle.min.js"></script>
  </head>
  <body ng-controller="MyCtrl">
    
    <ion-header-bar title="myTitle"></ion-header-bar>

    <ion-pane class="has-header" padding="true">
      <h2>You can't see me</h2>
    </ion-pane>
    
  </body>
</html>

Answer 1

我解决了自己的问题。添加animation-fill-mode:forwards会修复它，因此更新后的代码为：

animation: assetAnim 2s 1 forwards;

Answer 2

#asset {
    position:absolute;
    left:649px;
    top:215px;
    visibility: hidden;
    animation: assetAnim 2s 1 forwards;
    animation-delay: 1s;
    animation-play-state: paused;
}

@-webkit-keyframes assetAnim {
    0% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

尝试Play-state属性。

CSS动画完成后，图像消失

2 个答案: