css动画完成后运行js脚本

Posted 2023-02-22

【中文标题】css动画完成后运行js脚本

【英文标题】：Run js script after css animation is finished

【发布时间】：2018-11-17 10:08:52

【问题描述】：

我正在使用此代码在 ASP.NET Core 项目中创建移动文本的动画 http://www.html.am/html-codes/marquees/css-scrolling-text.cfm 动画完成后如何执行js sctipt？类似的，我想在动画完成后刷新页面

    <script>
       function myFunction() 
           location.reload();
       
    </script>

【问题讨论】：

尝试使用js动画。

这可能对davidwalsh.name/css-animation-callback有帮助

【参考方案1】：

您真正需要做的就是创建一个 javascript 事件监听器：

下面的示例为圆形对象创建了一个事件侦听器。您可以运行该示例来实时查看它。

另外，所有的 CSS / circle 的东西都只是动画，你真正需要看的是 javascript 部分。

var circle = document.getElementsByTagName("circle")[0];
var change = document.getElementById("change");

circle.addEventListener("animationend", function() 
		change.innerHTML = "The animation has ended!";
);

circle 
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: rgba(0,0,255,0.9);
  border: 2px solid black;
  position: absolute;
  
  animation: bounce 1.5s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  animation-fill-mode: forwards;


@keyframes bounce 
  from  
    transform: translate3d(0, 0, 0);
  
  to  
    transform: translate3d(0, 200px, 0);
  

<p id='change'>
This text will change when the animation has ended.
</p>
<circle></circle>