时间戳

首页 > 解决方案 > 动画延迟，如何先隐藏item？

css - 动画延迟，如何先隐藏item？

问题描述

我在按钮元素上有一张动画幻灯片。我想将其延迟 1 秒，如何先隐藏元素，使其不会出现在屏幕上，然后再消失以显示动画？我目前坐在页面上，然后在动画开始时消失

任何帮助表示赞赏

CSS

.btn {
   animation: fadeInAnimation ease 2.2s;
   animation-iteration-count: 1; 
   animation-fill-mode: forwards; 
   animation-delay: 1s;
}

关键帧

@keyframes fadeInAnimation { 
        0% { 
            opacity: 0;
            transform: translateX(-250%); 
        } 
        100% { 
            opacity: 1;
            transform: translateX(0);
         } 
    }

标签： css

解决方案

自己解决了

animation-fill-mode: both

感谢任何阅读本文的人

推荐阅读