使用Jquery触发CSS动画

我有一个CSS动画，我想点击按钮触发它，然后链接到另一个页面。 是否还有一种方法可以在页面加载后立即播放动画？ 提前致谢！

          $(document).ready(function(){ $(".main-btn").mouseup(function(){ $(".wrapper").reload(); }); });     
 
click
 
 
 
 
 
   @charset "UTF-8"; .main-btn { opcacity:1.0; position:absolute; width:172px; height:172px; } .main-btn:hover { opacity:0.7; } .btn-txt { width:100%; height:100%; z-index:-100; text-align:center; position:absolute; margin-left:-10px; top:11%; font-family:Arial; text-transform:uppercase; color:#FFF; font-size:2.5em; } .wrapper { width: 172px; /* Set the size of the progress bar */ height: 172px; position: absolute;/* Enable clipping */ clip: rect(0px, 172px, 172px, 78.5px); /* Hide half of the progress bar */ } /* Set the sizes of the elements that make up the progress bar */ .circle { width: 155px; height:155px; border: 1px solid #FFFFFF; border-radius: 86px; position: absolute; clip: rect(0px, 78.5px, 172px, 0px); } /* Using the data attributes for the animation selectors. */ /* Base settings for all animated elements */ div[data-anim~=base] { -webkit-animation-iteration-count: 1; /* Only run once */ -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */ -webkit-animation-timing-function:linear; /* Linear animation */ } .wrapper[data-anim~=wrapper] { -webkit-animation-duration: 0.01s; /* Complete keyframes asap */ -webkit-animation-delay: 0.25s; /* Wait half of the animation */ -webkit-animation-name: close-wrapper; /* Keyframes name */ } .circle[data-anim~=left] { -webkit-animation-duration: 0.5s; /* Full animation time */ -webkit-animation-name: left-spin; } .circle[data-anim~=right] { -webkit-animation-duration: 0.25s; /* Half animation time */ -webkit-animation-name: right-spin; } /* Rotate the right side of the progress bar from 0 to 180 degrees */ @-webkit-keyframes right-spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(180deg); } } /* Rotate the left side of the progress bar from 0 to 360 degrees */ @-webkit-keyframes left-spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } /* Set the wrapper clip to auto, effectively removing the clip */ @-webkit-keyframes close-wrapper { to { clip: rect(auto, auto, auto, auto); } } 

Answer 1

你的问题似乎有点困惑，这两个部分是交叉目的……：

我有一个CSS动画，我想点击按钮触发它，然后链接到另一个页面。

那么你想要一个动画运行然后加载一个页面？

这可以通过例如：

 $('a').on('click',function(e){ // click the link e.preventDefault(); // stop the default immediate redirect $(this).addClass('animationClass'); // add the animation class setTimeout(function(){ // do something after 1000ms (or same as animation duration) },1000); }); 

其中animationClass是可以应用于为链接设置animationClass的类。

是否还有一种方法可以在页面加载后立即播放动画？

所以你想加载页面然后在一段时间后制作动画？

只需使用animation-delay

动画延迟CSS属性指定动画何时开始。 这使动画序列在应用于元素后的某个时间开始。