标签: css-animations

原始问题...更新下面的工作代码:

我有一个加载图像,在ajax加载事件期间出现.通过向body元素添加或删除"loading"类来显示/隐藏图像.目前,加载图像将背景大小设置为0到100%,并且不透明度渐变(反之亦然,"返回"转换).

但是,我想要实现的是在淡出时立即进行背景大小转换(而不是转换),因此:

• 淡入:不透明度从0到1 in .2s,背景大小从0到100%in .2s

• 淡出:在.2s内从1到0的不透明度,从100%到0的背景大小应立即发生

  #loader {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      opacity: 0;
      -moz-opacity: 0;
      transition: all .2s ease-in-out
  }
  
  
  #loader .image {
      width: 400px;
      height: 138px;
      display: block;
      position: absolute;
      z-index: 2000; 
      top: 50%; 
      left: 50%; 
      margin: 0;
      background: url(assets/images/loading.png) no-repeat;
      background-size: 0 0;
      transition: all .2s ease-in-out;
      -webkit-animation: pulse 400ms ease-out infinite alternate;
      -moz-animation: pulse 400ms ease-out infinite alternate;
      -o-animation: pulse 400ms ease-out infinite alternate;
      animation: …

  Run Code Online (Sandbox Code Playgroud)

我试图让对象从屏幕底部"滑入",但由于我无法将屏幕高度作为CSS中的一个单元,我正在尝试使用媒体查询来执行此操作,如下所示:

@media(max-height:500px) {
  @keyframe slideUp {
    0%    { transform: translate3d(0,500px,0); }
    100%  { transform: translate3d(0,0,0); }
  }
}
@media(max-height:750px) {
  @keyframe slideUp {
    0%    { transform: translate3d(0,750px,0); }
    100%  { transform: translate3d(0,0,0); }
  }
}
/* etc. */

这不起作用(它使用第一个版本slideUp而不考虑高度),所以我假设关键帧一旦定义,就不能根据媒体查询覆盖或重新分配？有没有办法实现这种效果(没有很多不同的关键帧设置和使用媒体查询来分配适当的一个)？

我有一个垂直堆栈的项目,用户可以通过单击按钮附加一个项目,大致类似于此.

<ol>
  <li><textarea></textarea></li>
  <li><textarea></textarea></li>
</ol>
<a data-action="additem">Add another</a>

我正在尝试编写一个CSS动画,以便在li插入新动画时,"添加另一个"可以平滑地滑动到新的休息位置.li标签上的固定高度不是一个选项,我试图避免使用max-height动画黑客,因为它可能有奇怪的布局效果.

我发现我可以margin-bottom从某些东西动画到0并具有所需的效果,但我无法弄清楚如何在CSS中表达我想要应用此规则的元素的当前高度.百分比是相对于元素的宽度来衡量的,这不是我在这里所需要的,我想不出用巧妙的技巧calc来表达我想要的浏览器.

建议？

编辑

我正在使用带有重复绑定的模板将项目添加到列表中.JS只将另一个对象推送到一个可观察的数组中,框架处理实际的DOM插入.该li标签上有以下CSS让它顺利进入:

animation: append forwards .5s;

并append定义为:

@keyframes append {
    from {
        transform: translateX(10%);
        opacity: 0;
        margin-bottom: _____;
    }

    to {
        transform: none;
        opacity: 1;
        margin-bottom: 0;
    }
}

我有一个具有无限css3动画的元素,当元素悬停时,它会被更改为另一个无限动画.一切都还可以,但有时动画变化过于有弹性,有没有办法让动画在动画之间平滑(可能在动画之间将元素带到初始状态)在mouseenter和mouseleave上？两个动画的开始和结束状态是相同的.

@keyframes first-animation {
0% { transform: scale3d(1,1,0);}
50% { transform: scale3d(0.8,0.8,0); }
100% { transform: scale3d(1,1,0); }
};

@keyframes second-animation {
0% { transform: scale3d(1,1,0); }
70% { transform: scale3d(0.7,0.7,0); }
80% { transform: scale3d(0.9,0.9,0); }
100% { transform: scale3d(1,1,0);  }
};

div{
animation: first-animation 1.7s ease-in-out infinite;
}

div:hover, div:focus{
animation: second-animation 1.1s ease-in-out infinite;
}

我在CSS中画了一个圆圈.我尝试使用代码来解决这个问题,但无济于事.我有两个主要问题:

1. 在Chrome中:圆圈在旋转时摇晃

2. 在Firefox中:当圆圈以圆周运动动画时,会出现一个类似尾巴的点.

这是我使用的CSS样式:

.followers_arc_outer{
    position:absolute;
    width:300px;
    height:300px;
    border-radius:100%;
    border:2px solid;
}
.followers_arc_start {
    border-color:transparent #ecd201 #ecd201 #ecd201;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.followers_arc_inner{
    position:absolute;
    top:18px;
    left: 18px;
    width: 280px;
    height:280px;
    border-radius:100%;
    border:2px solid;
    border-color:transparent #ecd201 #ecd201 #ecd201;
}
.o_circle {
    -webkit-animation: rotation 2s infinite linear;
    animation: rotation 2s infinite linear;
}
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}@keyframes rotation{
    from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}
.i_circle …

我试图使用ReactCSSTransitionGroup为列表插入和删除设置动画,但删除动画始终仅动画列表的最后一项而不是正在删除的项.

这是一个jsbin来说明这个问题.尝试按"添加"按钮以验证插入动画确实按预期工作,然后单击任何项​​目旁边的"x"以查看列表的最后一项是动画而不是您尝试删除的问题.

在设置TransitionGroup时我做错了什么,或者我在CSS转换定义中遗漏了什么？

我希望我的文本只使用CSS3闪烁.它工作正常.但是,如果我添加float:left到div的:before选择器,它会阻止动画在WebKit(Safari/Chrome)上运行.

为了演示,在WebKit上打开JSFiddle,删除它float:left以查看它是否正常工作.

CSS:

.blink_me:before {
  content: "Blink";
}

.blink_me {
  -webkit-animation: blinker 1.5s linear infinite;
  -moz-animation: blinker 1.5s linear infinite;
  -o-animation: blinker 1.5s linear infinite;
  animation: blinker 1.5s linear infinite; 
}
@keyframes blinker {  
  50% { opacity: 0.0; }
}

HTML:

<span class="blink_me"> </span>

如何使它与选择器上的浮点一起工作？

BOUNTY信息:只是奖励现有的答案,当然值得更多的赞成.

我最近一直在研究改进我网站上的动画 - 更具体地说是移动设备上的导航下拉菜单.

在这方面,我偶然发现了以下案例,我希望能够获得更深入的知识.

情况是,在转换/动画时transform: translate3d(),似乎浏览器在使用%而不是使用时需要更多计算px.例如,在我的测试中,似乎从转换transform: translate3d(0, 500px, 0)到transform: translate3d(0,0,0)需要更少的计算并且运行比转换更平滑transform: translate3d(0, 100%, 0).

更新:经过进一步测试,我发现使用100vh/ 100vw绕过/减轻了使用百分比的问题.在元素具有窗口的已知百分比宽度或全宽的情况下,这可以是usefyk,从而改善性能.实际上,似乎使用此值的行为就像px在Chrome中分配了值一样.

这是每个动画的时间轴的几张图片.时间线是使用"性能"下的Google Dev工具获得的.为了更好地显示差异,Chrome开发工具的性能受限于"低端移动"(6倍CPU减速).

使用百分比变换:

使用像素(px)进行变换:

从图像中可以看出,在使用%而不是px确定转换时,似乎有更多的渲染和绘画正在进行.很有意义的是,浏览器必须计算每个帧的百分比值(我猜？),但与使用像素值相比,我感到惊讶的是它需要更多.

另请注意,图片中显示百分比时间轴的帧速率从未达到约60 fps,而是平均约为40 fps.

以下是复制案例的片段.有一个使用百分比,一个使用px.

$(document).on("click", function(){
$(".bb").toggleClass("active");
});

.aa{
  height:50px;
  background:blue;
  position:fixed;
  top:0;
  width:100%;

}
.bb{
  position:fixed;
  top:0px;
  background:none;
  height:100%;
  width:100%;
  left:0;
  transform:translateZ(0);
  overflow:hidden;
    pointer-events:none;
}
.cc{
  height:100%;
    transform:translate3d(0,500px,0);
    width:100%;
      transition:transform .5s ease-in;
      background:red;
}
.bb.active .cc{ …

每次我访问带有CSS3动画的页面时,我的笔记本都会变得嘈杂(给我一个信号,表明它在那里做了一些繁重的工作).如果至少结果动画足够顺畅,我会不在乎自己.但他们不是.我得到的结果是我的2.4 GHz Core 2 Duo配备8GB内存和专用的NVIDIA GeForce 320M(不多,但对于某些css应该足够了,没有？......)有些生涩,随机闪烁,在某些情况下有奇怪的神器..."动画",这通常比它的JS等同......

有没有人对JS和CSS动画做过任何比较？或者针对实际使用提出的CSS3好东西的基准测试(例如,它们中有多少可以在没有严重挂起的情况下同时出现在页面上等)？是否有任何最佳实践(例如 - 这样做,不要这样做,或者您的浏览器会爬行 - 等等)？

问题

我有两个css关键帧动画,我在一个元素上运行:

.fade-bg {
  animation-name: fade-bg-1, fade-bg-2;
  animation-delay: 0, 6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

动画定义如下:

@keyframes fade-bg-1 {

  from {
      opacity: 0;
      background-image: url(image-1.jpg);
  }

  50% {
      opacity: 1;
      background-image: url(image-1.jpg);
  }

  to {
      opacity: 0;
      background-image: url(image-1.jpg);
  }

}

@keyframes fade-bg-2 { /* Same as fade-bg-1 only with image-2.jpg  */ }

上面的工作,但当它到达第二个动画时,它不断重复该动画,并不循环回fade-bg-1.

我尝试了许多不同的组合animation-direction但无济于事.

问题

如何使动画返回fade-bg-1并重复自己？

这个例子

EXAMPLE