标签: css-animations

在使用css关键帧动画中的translate 2d变换设置其位置动画时,IE 10和Firefox都会将元素捕捉到整个像素.

Chrome和Safari没有,当动画微妙的动作时看起来好多了.

动画按以下方式完成:

@keyframes bobbingAnim {
   0% {
       transform: translate(0px, 0px);
       animation-timing-function:ease-in-out
   }

   50% {
       transform: translate(0px, 12px);
       animation-timing-function:ease-in-out
   }

   100% {
       transform: translate(0px, 0px);
       animation-timing-function:ease-in-out
   }
}

这是我的意思的一个例子:

http://jsfiddle.net/yZgTM/.

只需在Chrome和IE 10(或Firefox)中打开它,您就会注意到运动平滑度的差异.

我意识到可能有许多因素会影响这种行为,例如是否使用硬件加速来绘制元素.

有没有人知道一个修复程序试图强制浏览器总是在子像素上绘制元素？

我发现了类似的问题,但答案是使用translate转换动画,这正是我正在做的事情: CSS3 Transitions'snap to pixel'.

更新: 玩了一下之后我找到了Firefox的修复程序,虽然在IE 10中没有做任何事情.诀窍是稍微缩小元素并使用translate3d在Z轴上具有1px偏移:

@keyframes bobbingAnim {
   0% {
       transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
       animation-timing-function:ease-in-out
   }

   50% {
       transform: scale(0.999, 0.999) translate3d(0px, 12px, 1px);
       animation-timing-function:ease-in-out
   }

   100% {
       transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
       animation-timing-function:ease-in-out …

我有动画:

img.rotate {
  animation-name: rotate;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

我有无限的旋转图像.现在我想用JS改变旋转速度.我试过了:

$('img').css('animation-duration', '2s');

持续时间会改变速度,但动画会重新启动到帧密钥0%(第一个),但我只想让动画继续,就像什么也没发生一样; 我不想回到0%.

我怎样才能做到这一点？

我想用CSS3或JavaScript创建一个环形流程微调器,类似于Android中的加载进度微调器.

旋转器应连续旋转并填充沿边缘逐渐消失的纯色(即圆锥形渐变),如下图所示:

我怎样才能做到这一点？

我在创建具有特定效果的弹出菜单时遇到问题.弹出窗口从display:none到block然后我使用jquery来设置从0到1的不透明度(反之亦然).这是必要的,因为否则当元素刚刚更改了显示属性时,不会发生转换.我不认为这会传播给孩子们.但是在我的弹出窗口中,我有4列链接,这些链接具有不透明度过渡,每个链接都有自己的延迟,因此它们一次只能进入一个.但是,当弹出窗口出现时,这不起作用.它们立即处于不透明状态:1即使延迟时间很长,它仍然无效.

有没有解决的办法？我知道CSS动画和同一元素上的显示更改不起作用,但发现任何子动画也不起作用有点令人沮丧.当CSS如此简单时,我宁愿不必编写javascript.但如果javascript是唯一的答案,那么这将是一个简单的解决方案.

这是一个非常简化的代码示例:

$flyout.addClass('in').animate({opacity: 1}, 200, "linear");

"in"是导致列转换的类:

.flyout { display: none; }

.flyout.in { display: block; }

.columns li {
    opacity: 0;
    -webkit-transition: opacity 0.2s;
}

.flyout.in .columns li { opacity: 1; }

// delay increases with each column
.columns > li:first-child {
    -webkit-transition-delay: 0.2s;
}

我有一个关键帧动画,有多个步骤:

@keyframes rotateLeftSideCustom {
    0% {
    }
    40% {
        -webkit-transform: rotateY(-15deg);
        transform: rotateY(-15deg);
        opacity: .8;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: scale(0.8) translateZ(-200px);
        transform: scale(0.8) translateZ(-200px);
        opacity: 0;
    }
}

.section-animation {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotateLeftSideCustom 0.6s both ease-in;
    animation: rotateLeftSideCustom 0.6s both ease-in;
}

有什么办法可以用JavaScript来设置动画的进度吗？

例如:

document.querySelector('.section-animation').animationState('40%');

上下文:我正在尝试构建一个可拖动的界面,我需要将动画的进度与用户拖动的数量对齐.

这是一个jsfiddle与我的CSS加载动画正常工作.

但是,当我在node-webkit应用程序中使用相同的代码时,SVG路径和颜色是静态的并且不显示动画.

经过一番研究,我尝试添加

"chromium-args": "--enable-threaded-compositing"

根据此问题的解决方案到我的package.json文件.不幸的是,这并没有解决我的问题.

我使用的是CSS动画,我的加载屏幕按建议从第二个答案这个职位.

我的动画是此CodePen的略微修改版本.

是否有人在NW.js中遇到类似的CSS动画问题？这个动画可能无法正常工作的原因是什么？

我之前只有一个简单的旋转CSS动画,它在我的NW.js应用程序中运行良好.我对这种不一致感到困惑.

您好我正在尝试执行简单的任务,即使用bottom而不是top来上下移动div以产生浮动/悬停效果.所以从.bottom: 63px到bottom: 400px

我是CSS和关键帧的新手!你可能会说,但这是我尝试过的,它似乎没有做任何事情:

.piece-open-space #emma {
    background-image: url('images/perso/Emma.png?1418918581');
    width: 244px;
    height: 299px;
    position: absolute;
    display: block;
    width: 244px;
    background-image: none;
    position: absolute;
    left: 2149px;
    bottom: 63px;
    -webkit-animation: MoveUpDown 50s linear infinite;
}

@-webkit-keyframes MoveUpDown {
    from {
        bottom: 63px;
    }
    to { 
        bottom: 400px;
    }
}

更新

问题是它不会循环是我正在寻找的目标它达到400px然后立即回到63px如何让它达到400px然后回到63px它给出了无限循环的效果"徘徊/浮动".

我有一个元素,当它的内容发生变化时,它的宽度我想要动画.它有width: auto,而且永远不会改变.我已经看过这个技巧,但那是为了在两个值之间转换而设置一个.我根本不操纵值,只是内容,我希望我的元素大小随动画而改变.这在CSS中完全可能吗？

这是我的代码的简化版本:

.myspan {
  background-color: #ddd;
}

.myspan:hover::after {
  content: "\00a0\f12a";
  font-family: Ionicons;
  font-size: 80%;
}

<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<html>
  <body>
    <span class="myspan">Hello!</span>
  </body>
</html>

当用户将鼠标悬停在元素上时,我希望将大小改变为动画.

我有一个元素,在CSS自定义属性的帮助下,用CSS和JS随机动画,方法如下:

var myElement = document.querySelector('#my-element');

function setProperty(number) {
  myElement.style.setProperty('--animation-name', 'vibrate-' + number);
}

function changeAnimation() {
  var number = Math.floor(Math.random() * 3) + 1;
  setProperty(number);
  /* restart the animation */
  var clone = myElement.cloneNode(true);
  myElement.parentNode.replaceChild(clone, myElement);
}

myElement.addEventListener('animationend', changeAnimation, false);

#my-element {
  width: 50px;
  height: 50px;
  background: #333;
}

 :root {
  --animation-name: vibrate-1;
}

#my-element {
  animation: 3.3s 1 alternate var(--animation-name);
}

@keyframes vibrate-1 {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% …

我在搜索这个问题时遇到了困难,因为我能找到的大部分内容都是关于动画应该很快但行动缓慢的动画.我的问题是关于一个我希望持续时间很长但仍然流畅的动画.

我已经创建了这个jsfiddle来演示这个问题:http://jsfiddle.net/93Bqx/

我试图让一个元素随着时间的推移慢慢移动到另一个位置.但动画非常不稳定.

基本上,它归结为这样的事情:

$elem.animate({
        left: x,
        top: y
}, someLargeNumber);

我想知道问题是动画是否太慢以至于每一步都小于一个像素,所以它将它们四舍五入为0或1使它看起来像是丢帧然后一次全部移动.但我不知道如何检查或解决这个问题.

有没有更好的方法来做慢动画,所以他们是顺利的？我有一个类似的用CSS3创建并且翻译(x,y)很顺利,但遗憾的是我需要比我认为可以用CSS获得更多的灵活性.