Javascript 当我想使用CSS转换/动画时，如何获得显示和淡出的提示？_Javascript_Css_Css Transitions_Css Animations

Javascript 当我想使用CSS转换/动画时，如何获得显示和淡出的提示？

javascript css

Javascript 当我想使用CSS转换/动画时，如何获得显示和淡出的提示？,javascript,css,css-transitions,css-animations,Javascript,Css,Css Transitions,Css Animations,我有一个已保存的提示，每当对表单进行内联编辑时都会显示该提示。每当进行编辑时，我希望提示符以完全不透明度显示，然后在2秒钟内逐渐消失。我有一个额外的规定，如果过渡/动画没有完全完成，提示再次触发，我需要立即以完全不透明度重新显示提示（然后在2秒钟内再次淡出）我没有任何主要的浏览器限制，因为IE9是最低要求这是否可以使用CSS转换/动画和JS的组合，如果可以，我应该如何做需要注意的是，到目前为止，我已经尝试了多种方法，但它们似乎都有这样或那样的问题，所以我希望有人能教我一些解决这个问题的通用

我有一个已保存的提示，每当对表单进行内联编辑时都会显示该提示。每当进行编辑时，我希望提示符以完全不透明度显示，然后在2秒钟内逐渐消失。我有一个额外的规定，如果过渡/动画没有完全完成，提示再次触发，我需要立即以完全不透明度重新显示提示（然后在2秒钟内再次淡出）

我没有任何主要的浏览器限制，因为IE9是最低要求

这是否可以使用CSS转换/动画和JS的组合，如果可以，我应该如何做

需要注意的是，到目前为止，我已经尝试了多种方法，但它们似乎都有这样或那样的问题，所以我希望有人能教我一些解决这个问题的通用方法

多谢各位

编辑：KatieK，感谢您的帮助，并对延迟回复表示抱歉。我的代码基本上如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Animation example</title>
    <style>
      p {
        background: green;
        opacity: 0;
      }

      .show {
        -webkit-animation: fade_out 2s;
        -moz-animation: fade_out 2s;
        animation: fade_out 2s;
      }

      @-webkit-keyframes fade_out {
        0% {
          opacity: 1.0;
        }

        25% {
          opacity: 1.0;
        }

        100% {
          opacity: 0;
        }
      }

      @-moz-keyframes fade_out {
        0% {
          opacity: 1.0;
        }

        25% {
          opacity: 1.0;
        }

        100% {
          opacity: 0;
        }
      }

      @keyframes fade_out {
        0% {
          opacity: 1.0;
        }

        25% {
          opacity: 1.0;
        }

        100% {
          opacity: 0;
        }
      }

      div {
        border: #000 solid 1px;
        height: 50px;
        width: 50px;
      }

    </style>
  </head>
  <body>
    <p id="prompt">Saved</p>
    <div id="editable" contenteditable="true">
    </div>
    <script>

      document.getElementById('editable').onblur = function () {
        document.getElementById('prompt').className = '';
        document.getElementById('prompt').offsetHeight;
        document.getElementById('prompt').className = 'show';
      };

    </script>
  </body>
</html>


动画示例
p{
背景：绿色；
不透明度：0；
}
.表演{
-webkit动画：淡出2秒；
-moz动画：淡出2s；
动画：淡出2秒；
}
@-webkit关键帧淡出{
0% {
不透明度：1.0；
}
25% {
不透明度：1.0；
}
100% {
不透明度：0；
}
}
@-moz关键帧淡出{
0% {
不透明度：1.0；
}
25% {
不透明度：1.0；
}
100% {
不透明度：0；
}
}
@关键帧淡出{
0% {
不透明度：1.0；
}
25% {
不透明度：1.0；
}
100% {
不透明度：0；
}
}
div{
边框：#000实心1px；
高度：50px；
宽度：50px；
}
已保存
document.getElementById（'editable'）。onblur=function（）{
document.getElementById（'prompt'）。className=''；
document.getElementById（'prompt'）。offsetHeight；
document.getElementById（'prompt'）。className='show'；
};

我在几个网站上读到，一旦动画被触发，你不能在不引起某种页面回流的情况下重新触发动画，这就是offsetHeight属性行所做的

这个解决方案确实有效，但我觉得它真的很有黑客味，所以我只是想知道是否有更可靠的方法来实现我想要的东西，这就是上面的代码所做的，但是没有黑客味

谢谢。

IE9不支持CSS3动画（），因此您需要JavaScript帮助。Modernizer或jQuery是流行的选项-使用哪种取决于具体的场景

如果您发布一个带有标记、CSS和任何JS库的演示，我们可以帮助您从那里开始。