相关疑难解决方法(0)

我有一个需要在点击时重新启动的CSS3动画.这是一个显示剩余时间的酒吧.我正在使用scaleY(0)变换来创建效果.

现在我需要通过将条形图恢复到scaleY(1)来重新启动动画,然后再次转到scaleY(0).我第一次尝试设置scaleY(1)失败,因为它需要相同的15秒才能恢复到全长.即使我将持续时间更改为0.1秒,我也需要延迟或链接scaleY(0)的分配以使条形补充完成.对于这么简单的任务来说,感觉太复杂了.

我还发现了一个有趣的提示,通过从文档中删除元素重新启动动画,然后重新插入它的克隆:http: //css-tricks.com/restart-css-animation/

它有效,但有没有更好的方法来重新启动CSS动画？我正在使用Prototype和Move.js,但我并不局限于它们.

我正在构建基于CSS3过渡的非jQuery响应式图像滑块.

结构很简单:视口和内部相对定位的UL,左浮动LI.

在这种情况下我遇到了一个问题:

1. 用户点击"上一步"箭头.
2. JS在当前显示的LI节点之前附加适当的LI.
3. 目前,UL已设置CSS转换none 0s linear以防止动画更改.在这一刻,我通过滑块宽度减去UL CSS左值(比方说:从0px到-1200px),使视图与原来相同.
4. 现在我正在将UL的过渡属性更改为all 0.2s ease-out.
5. 现在我正在改变UL的左侧属性以触发CSS3动画.(比方说:从-1200px到0px).

问题是什么？浏览器简化了更改,不会制作任何动画.

斯托扬斯特凡在他的博客中写了一篇关于回流的问题在这里,但在这种情况下,试图迫使元件上的回流不起作用.

这是一段代码(为了简化,我跳过了浏览器前缀):

ul.style.transition = 'none 0s linear 0s'; ul.style.left = '-600px'; ul.style.transition = 'all 0.2s ease-out'; ul.style.left = '0px';

这里有一个小问题,看看行动中的问题:http://jsfiddle.net/9WX5b/1/

我试图找出一个可靠的,跨现代的浏览器方法,使用CSS3动画事件和事件监听器来获得对CSS3动画的微调控制.我知道可以做到这一点.可悲的是,尽管我在过去的2-3周内完成了所有的研究,但现在这已经超出了我的能力范围.

到目前为止,这是我的jsfiddle:http://jsfiddle.net/mvkMH/23/

这是我正在尝试做的事情:我有一个<ul>id #main包含<li>一个类的.box.当用户点击任何.box它将.move-y类添加到($this)- 它还同时将该.move-x类添加到剩余的列表项.当用户单击另一个时.box,所有现有的.move-y and .move-x类都将替换为.move-y-rvs and .move-x-rvs类.一直使用CSS3 Animation事件来保持一切完美同步.

为何选择CSS3动画事件？

• CSS3动画在iOS上很快
• 通过jQuery触发的CSS3动画允许你"重新启动"动画(如果已经播放)(https://css-tricks.com/restart-css-animation/)
• 理论上,通过使用jQuery跟踪AnimationStart,AnimationIteration和AnimationEnd事件,可以创建非常复杂和交互式的CSS3动画.

这是脚本应该在我的脑海中运作的方式 - 我无法让它在现实生活中工作;-)

1. 单击.box元素后,选中#main以查找任何.move-x和.move-y类

2. 如果检测到.move-x和.move-y类:

   • 用move-x-rvs和.move-y-rvs替换这些类
   • 使用.move-x-rvs和.move-y-rvs类将css 动画事件侦听器附加到元素
   • 在AnimationEnd Event上删除.move-x-rvs和.move-y-rvs类
   • 将AnimationName设置为空字符串(如果再次单击,则重置css3动画以再次播放)
   • 现在将.move-y类添加到$(this)
   • 将.move-x类添加到所有其他剩余列表项

3. 如果未检测到.move-x和.move-y:

   • 将.move-y类添加到$(this)
   • 将.move-x类添加到所有其他剩余列表项

4 - 动画事件监听器功能应附加现代浏览器的前缀(如本例所示 - 如何通过JavaScript重新触发WebKit CSS动画？)

再次,到目前为止,这是我的jsfiddle:http: …

这是一个HTML表单

<form method="post" action="camount.php" id="loginForm">
  <span id="heading">
    Username: <input type="text" name='us' id='us'/><br />
    Password: <input type="password" name='pa' id='pa'/><br />
  </span>
  <input type="button" value="Sign in" onclick="isPasswordCorrect(document.getElementById('us'), document.getElementById('pa'))" /><br />
  <span class="animated shake" id="report"></span>
</form>

以下是调用的JavaScript函数的相关代码

if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
  if(xmlhttp.responseText)
    document.getElementById("loginForm").submit()
  else{ 
    document.getElementById("report").style.webkitAnimationName = "";
    setTimeout(function (){
    document.getElementById("report").style.webkitAnimationName="animated shake";
    }, 0);
    var element = document.getElementById('report');
    element.innerHTML = "wrong password/username"   
    password.value = ""
  }
}
xmlhttp.open("post", "CheckCred.php", true)
//required for sending data through POST
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xmlhttp.send("name="+encodeURIComponent(name.value)+
             "&password="+encodeURIComponent(password.value))

这是CSS应该使 …

每次css3动画循环时我都想更改样式中的变量.

例如,以下css从屏幕的顶部到底部丢弃一组降落伞:

@-webkit-keyframes fall {
  0% { top: -300px; opacity: 100; }
  50% { opacity: 100; }
  100% { top: 760px; opacity: 0; }
}

#parachute_wrap {
  -webkit-animation-name: fall;
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-duration: 70s;
  -webkit-animation-timing-function: linear;
}

然而,理想情况下,在每个循环结束时,我想投入一个随机的X位置.

该组的默认样式是:

#parachute_wrap {
  position: absolute;
  top: -300px;
  left: 50%;
  margin-left: 140px;
}

因此,在70秒后,我想在-200px和200px之间的任何地方更改margin-left或left属性.

我知道我可以用jquery和everytime()来做这样的事情:

$('#parachute_wrap').everyTime ( 70000, function (){
    $("#parachute_wrap").css({left: Math.floor(Math.random() * 51) + 5 + '%'},0);
});

但有没有办法将css循环绑定到js来执行此操作？即是否有任何类型的回复调用js可以听取与动画的完美同步？我担心,如果我在70年代的计时器上使用JS,那么将要发生的时间是不正确的,并且在css动画的一半,js将执行其定时循环,并且降落伞将跳转到半个地方通过动画的方式.

你会怎么做？

我有一个使用Animate.CSS的动画,如果用户愿意,我想重播,但我尝试过的东西不起作用.这是代码:

HTML:

    <div class="img-center">
       <img src="path.jpg" class="feature-image animated rotateInDownRight" />
    </div>
       <p class="textcenter">&nbsp;</p>
    <div class="img-center">
       <a href="#" id="replay">Replay</a>
    </div>

JS:

var $j = jQuery.noConflict();
$j("#replay").click(function() {
    $j('.feature-image').removeClass('animated rotateInDownRight').addClass('animated rotateInDownRight');
});

我知道脚本本身是有效的,因为我可以看到它发生在Firebug中但是该动画再次没有动画.如何使用Animate.CSS实现这一目标？

我有一个硬币动画,但我需要每30秒重复一次这个动画,这可能吗？谢谢.

img {
  width: 100px;
  height: 100px;
}

.imageRotateHorizontal{
    animation: spinHorizontal 1.8s linear;
}

@keyframes spinHorizontal {
	0% { 
        transform: rotateY(0deg); 
	}
    100% {
        transform: rotateY(360deg);
    }
}

<div style="width: 200px">
        <img id='imageLoading' class='imageRotateHorizontal' src="https://upload.wikimedia.org/wikipedia/commons/d/d6/Gold_coin_icon.png" />
<div>

我想通过 CSS 动画触发 javascript，反之亦然（用于触发 CSS 的 Javascript）。

最终目标是让 CSS 动画闪烁，并让它们触发通过 Web Audio API 导入的音频文件。

现在我只是对让 CSS 动画和 Javascript 相互交流感兴趣。

所以..

我正在 Webkit 浏览器中试验 exclusivley。下面是一个堆栈溢出线程，它似乎回答了我问题的第一部分： 如何通过 JavaScript 重新触发 WebKit CSS 动画？

但我无法让它发挥作用。

我添加了我在下面抓取/修改的代码

<!--SETUP-->
<!DOCTYPE html>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="test.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<!--END setup-->



<script src="test.js"></script>
<div id="box"> shake </div>
<div id="button"> Button </div>   

CSS

#button {
    width:100px;
    height:100px;
    background:blue;
    position:absolute   

}

#box{
width:100px;
height:100px;
background:red;
position:absolute;
top:100px;
left:90%;
margin-left:100px;
-webkit-animation: shake 1.5s  steps(1)  ; …