标签: css-animations

有没有办法让按钮的背景颜色从灰色变为蓝色,然后仅使用css3变回灰色？一个很好的例子是默认操作按钮是可可吗？我知道这可以在javascript中完成,但我宁愿只使用css.

我试图在段落的文本上实现以下动画:

目的是根据左侧的形状设置文本边界的动画.这是我尝试过但我无法弄清楚文本形状的过渡:

.mainDiv {
  width: 600px;
  margin: 0px auto;
  border: solid 1px #000;
  padding: 10px;
  min-height: 200px;
}
.element {
  width: 200px;
  height: 200px;
  background: #e3f5f1;
  float: left;
  margin-right: 5px;
}
.textElement {
  width: 395px;
  float: left;
}

<div class="mainDiv">
  <div class="element"></div>
  <div class="textElement">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type …

我在页面上有一堆长时间运行的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服务器上的静态页面进行测试(或使用下面的链接).

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

在旋转动画中,适用于Chrome但不适用于Firefox.为什么？

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

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

#example {
    background: red;
    width: 100px;
    height: 100px;
    -moz-animation: rotate 20s linear 0 infinite;
    -webkit-animation: rotate 20s linear 0 infinite;
}

http://jsfiddle.net/WsWWY/

我想知道是否可以像这样使用百分比值:

@keyframes myAnimation {
    0%    { height: 100px; }
    33.3% { height: 120px; }
    66.6% { height: 140px; }
    100%  { height: 200px; }
}

它似乎工作,但我不确定浏览器是否只是"圆"这个？那么像33.3457%这样的价值呢？非常感谢!

有没有办法将一个mixin或style的声明传递给另一个mixin作为输入参数？

我们来看一个动画关键帧的例子.以下是我们如何在纯CSS中定义关键帧:

@-moz-keyframes some-name
{
    from { color: red; }
    to { color: blue; }
}

@-webkit-keyframes some-name
{
    from { color: red; }
    to { color: blue; }
}

@keyframes some-name
{
    from { color: red; }
    to { color: blue; }
}

想法是使用mixins简化这些声明,所以我们可以有如下内容:

.keyframes(name, from, to)
{
    // here we need somehow to reproduce structure
    // that we have in an example above
}

// define one animation
.my-from() { color: red; }
.my-to() { color: blue; } …

我有一个简单的css动画,我想玩,然后停在最后一帧完全显示图像.但目前它正在播放的那一刻似乎又回到了第一帧,因此圣诞老人的脸上消失了.

如何让它播放一次然后停在最后一个关键帧上或显示图像而不再消失？

http://jsfiddle.net/uy25Y/

    <img class="santaface" src="http://imgs.tuts.dragoart.com/how-to-draw-a-santa-face_1_000000001282_3.jpg">

     .santaface{
          opacity:0;
          position: absolute;
          left:40%; top:20%; width:20%;
            -webkit-animation-name: santaappear;
            -webkit-animation-duration: 13s;
            }


        .santaface{-webkit-animation-delay:2s;animation-delay:2s;}

        @-webkit-keyframes santaappear {
            0% { opacity:0;}
               96% {opacity:1;}
        }

是否应该:hover在CSS动画完成元素运行后的伪状态上指定样式更改？

编辑:也许更有针对性,我应该问:为什么在动画上应用'转发'会阻止更改特定的样式？

编辑2:事实证明这实际上是一个跨浏览器问题.例如Chrome(我运行的是版本38.0.2125.111)行为不正确,但Firefox会按照规范处理它.

长话短说:根据规格(由下面的chrona引用)添加!important到覆盖应该呈现样式.但是,目前只有Firefox才能正确处理.

这是一个减少:

@keyframes go {
  0% {
    background: green;
  }
  100% {
    background: pink;
  }
}

@-webkit-keyframes go {
  0% {
    background: green;
  }
  100% {
    background: pink;
  }
}

.box {
  animation: go 3s forwards;
  -webkit-animation: go 3s forwards;
  
}

.box:hover {
    background: orange!important;
  cursor: pointer;
 }

<div class="box">Hover states don't work after animation</div>

我无法找到与此相关的信息,规范中没有任何内容:http://www.w3.org/TR/css3-animations/

有人知道a)这应该是可能的吗？b)一旦动画结束,如何让悬停状态对元素起作用？

我想做的是Loading header tag应该动画直到进度条达到100%.任何人都可以帮我这样做吗？

animate.css链接:https://daneden.github.io/animate.css/

当前输出:http://jsfiddle.net/GZSH6/45/

我正在尝试做这样的事情：

但是球似乎并没有通过环，而是越过了环。如何解决此问题？

body {
  height: 50em;
}

.ring {
  position: relative;
  width: 200px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #ffcf82;
  z-index: 9
}

@keyframes spinner {
  0% {
    transform: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(0deg);
  }
  60% {
    transform: rotateZ(180deg);
  }
}

@keyframes translate {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-370px);
  }
}

.ring {
  animation-name: spinner;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  transform-style: preserve-3d;
}

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #14e78e; …