标签: css-animations

所以我有一些div应用了各种效果的原生元素(border-radius,box-shadow和transform: scale()).当我为它们制作动画时,会发生两件奇怪的事情:

1. 即使我没有尝试为比例设置动画,如果我没有将比例放在动画中,它也会被忽略.
2. 当我将比例放在动画中时,Webkit模糊了元素

请参阅此处的示例:http://jsfiddle.net/trolleymusic/RHeCL/ - 底部的按钮将触发问题.

第一个问题也发生在Firefox中,所以我猜这是因为这是动画规范应该如何工作的.不是我想要的,但好吧,我会忍受它.

第二个问题很奇怪.我知道它与3d变换有关,因为如果我(仅用于测试目的)声明-webkit-perspective或-webkit-transform-style: preserve-3d;在圆形元素上,它也会导致模糊问题.我的困惑在于,我并没有尝试将z索引转换为全部,我也尝试使用纯粹的动画translateY代替translate.

它发生在Chrome(18),Chrome Canary(20)和Safari(5.1.2和5.1.4)中.

那么,我认为我的想法是正确的吗？我怎样才能避免模糊？

最坏的情况:我可以使用不同大小的元素而不是缩放它们,这不是真正的问题 - 但我认为这将是一个更优雅的解决方案,现在这个问题已经出现了.

CSS3过渡,变换和动画都很精彩.现在更多的浏览器支持它们.

还有一件事我一直在问自己:为什么规范不确定CSS3过渡和动画应该处理高度:自动？

当我们使用CSS3灵活的盒子模型和媒体查询之类的东西摆脱固定布局时,它没有任何意义.

使用JavaScript只是为了设置具有固定高度的CSS转换没有任何意义.

现在我的问题是:

W3C是否会指定高度:自动应支持CSS3过渡和动画,还是我们可以请求它们指定这个？

一旦页面加载,我想一个接一个地"出现"三个DIV.

我怎样才能做到这一点？

我知道如何在鼠标悬停时出现单个div而没有任何触发,一个接一个地使用css,我怎样才能实现这样的平滑过渡？

我有一个CSS动画,可以应用于带有CSS类的HTML元素.我还有一个事件监听器animationend(它是一个现代的Windows应用程序,所以浏览器只有IE11).我所看到的是,有时事件会被触发,有时则不会.无论事件发生如何,我总能看到它在视觉上动画.对我来说,这看起来像某种竞争条件.

我在网上试图了解什么可能导致这个事件没有被解雇但我没有找到任何令人满意的结果.我在MDN上找到了以下内容:

注意:如果转换中止,则不会触发transitionend事件,因为动画属性的值在转换完成之前已更改.

UPDATE1: transitionend与animationend此无关,因此此信息无关.

我不确定它是否适用于CSS动画.有没有人对这会导致什么有任何想法？如果有任何事件可以检测到动画中止,这也可能是一个有用的解决方法.

UPDATE2:我正在使用的当前解决方法:

element.addEventListener("animationstart", function () {
    setTimeout(function () {
        // do stuff
    }, animationDuration);
});

我想停止正在进行的转换.

我发现一些散布在互联网上的参考文献[1] [2],但我似乎无法把它拼凑在一起.

这是第一个建议的小提琴(用jQuery和CSS Transit作为上下文):http://jsfiddle.net/thomseddon/gLjuH/

谢谢

[1] https://twitter.com/evilhackerdude/status/20466821462

[2] github.com/madrobby/zepto/issues/508

尝试在CSS3边距中制作动画.这本网站似乎是说你可以,但它不是为我工作.

这是一个jsFiddle:http://jsfiddle.net/ybh0thp9/3/(点击一个部分查看动画切换).

这是我的CSS:

$(".section").click(function() {
    $(this).toggleClass("open");
});

我实际上有3个动画.1表示fadeIn初始加载时的简单初始化,然后margin单击其他2个表示动画.我也试过margin而不是顶部和底部,但仍然没有工作的迹象.

我试图捕捉元素动画中的特定时刻.含义 - 我希望动画在X点开始和停止(让我们说在100秒动画的第二个5开始和停止).

这是我对 JSFiddle的看法

@-webkit-keyframes background {
  from { background: yellow; }
  100% {
    background: blue;
  }
}

div {
  -webkit-animation-name: background;
  -webkit-animation-duration: 100s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: -40s;
  -webkit-animation-play-state: paused;
}

这似乎在Chrome和Firefox中运行良好,但似乎无法在Safari和IE中运行(不,对吧？!)注意:我故意留下前缀,专门在Safari上测试它.

与Chrome不同,似乎动画永远不会在Safari中启动,并且仍处于初始阶段.

这是一个已知的问题？是否有解决方法或其他方式来实现这一点？

UPDATE /澄清

我需要的是能够捕获动画的特定FRAME.在Chrome中打开我的小提琴,在我的小提琴中播放动画延迟属性(确保它仍然是负数).您将看到的是,您可以捕获动画的1个特定帧.这正是我需要的.我的问题是这在Safari中不起作用.

我需要使用纯CSS实现无限弹跳效果,所以我引用了这个网站并最终做到了这一点.

.animated {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
} 

@-webkit-keyframes bounce {
  0%, 20%, 40%, 60%, 80%, 100% {-webkit-transform: translateY(0);}
  50% {-webkit-transform: translateY(-5px);}
} 

@keyframes bounce { 
  0%, 20%, 40%, 60%, 80%, 100% {transform: translateY(0);}
  50% {transform: translateY(-5px);}
} 

.bounce { 
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

#animated-example {
    width: 20px;
    height: 20px;
    background-color: red;
    position: relative;
    top: 100px;
    left: 100px;
    border-radius: 50%;
}

hr { …

当给出例如<div>盒子阴影以及旋转时,它将导致盒子阴影方向的旋转 - 当盒子阴影应该产生照明幻觉时,这是有问题的.

示例:https://jsfiddle.net/5h7z4swk/

div {
  width: 50px;
  height: 50px;
  margin: 20px;
  box-shadow: 10px 10px 10px #000;
  display: inline-block;
}
#box1 {
  background-color: #b00;
}
#box2 {
  background-color: #0b0;
  transform: rotate(30deg);
}
#box3 {
  background-color: #00b;
  transform: rotate(60deg);
}
#box4 {
  background-color: #b0b;
  transform: rotate(90deg);
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#box6 {
  background-color: #0bb;
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

<div id="box1"></div>
<div id="box2"></div> …

我在页面上有一堆长时间运行的CSS动画.我想在用户切换到另一个选项卡时暂停它们,并在用户再次返回原始选项卡时恢复它们.为简单起见,我不打算在此时使用跨浏览器解决方案; 让它在Chrome中运行应该足够了.

document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    document.querySelector("#test").classList.add("paused");
  } else {
    document.querySelector("#test").classList.remove("paused");    
  }
});

div#test {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  left: 10vw;
  animation-name: move;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes move {
  to {
    left: 90vw
  }
}

.paused {
  animation-play-state: paused !important;
  -webkit-animation-play-state: paused !important;
  -moz-animation-play-state: paused !important;
}

<div id="test"></div>

上面的代码水平移动一个红色矩形.矩形完成动画需要5秒钟.

问题:动画启动后,切换到另一个浏览器选项卡; 经过一段时间(超过5秒)后切换回第一个标签.

预期结果:矩形从其停止的位置继续其路径.

实际结果:矩形出现在最终目的地并停止的大部分时间.有时它按预期工作.视频演示了这个问题.

我打了不同的价值观animation-fill-mode和animation-timing-function,但结果总是相同的.正如rv7 指出的那样,在CodePen,JSFiddle,JSBin和stackoverflow JS工具中共享示例会影响结果,因此最好直接针对本地HTTP服务器上的静态页面进行测试(或使用下面的链接).

为方便起见,我已将上面的代码部署 …