标签: css-animations

我想在CSS3中模拟弹性缓动函数.CSS3本身并不支持这个,所以我一直想出自己的关键帧,它看起来还不错,但不是很自然.

我不想要一个需要任何其他JavaScript脚本的解决方案.StackOverflow上的所有其他帖子都接受了JS解决方案.

在纯CSS3中实现弹性缓动的最佳方法是什么？

到目前为止,这是我的工作,如果这有助于任何人......

https://jsfiddle.net/407rhhnL/1/

我正在制作红色,绿色和蓝色等长矩形棱镜的动画.我通过硬编码以下CSS3关键帧手动模拟弹性缓动:

@include keyframes(popup) {
  0% {

  }

  20% {
    transform: translateY(-50px);
  }

  40% {
    transform: translateY(20px);
  }

  60% {
    transform: translateY(-6px);
  }

  90% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(0px);
  }
}

我不是在寻找有关调整此代码的建议,我想知道是否有比硬编码更好的解决方案.

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

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

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

我正在使用这里描述的进度条:

http://css-tricks.com/html5-progress-element/

使用<progress>元素并使用伪类-webkit-progress-bar和样式设置它 -webkit-progress-value.

所以现在我想要动画progress-value,无论何时更新.

在我的理论中,这应该通过转换其CSS宽度属性来完成,如下所示:

progress::-webkit-progress-value {
    transition: 5s width;
}

但由于某种原因,这似乎不起作用.

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

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

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; …

这是一个时髦的.我确定它与webkit相关,因为它似乎只是Chrome版本20.0.1132.57和Safari 5.1.7中的一个问题.我上传了一个简短的视频来解释这个问题,因为几乎不可能通过文字来解释.

视频:http: //youtu.be/0XttO-Diz2g

简短版本: 在CSS3动画期间,定位元素(绝对或相对)内的文本似乎改变了它的抗锯齿.动画正在运行时变得更大胆.

注意: 这与缩放元素变得模糊不适的动画不同.(这个问题)

任何想法,解决方法等？

我认为这是最新Chrome(21.0.1180.57)中的一个错误,但我想我会在这里发帖只是为了仔细检查.

我正在使用javascript更改元素的旋转,并使用webkit过渡来为旋转设置动画.有时,根据开始和结束旋转,元素随着旋转随机缩放.我在这里做了一个演示:http://jsfiddle.net/XCwUQ/(点击正文).

有谁知道为什么会发生这种情况？

干杯,

基督教

我正在使用CSS变换/动画与font-face(twitter bootstrap/font-awesome)来生成一个类似spinner的gif图标.

问题是图标在360度左右时会摇摆不定.看到这个JSFiddle,看看我的意思.有谁知道怎么让它不摇晃？或者至少让它旋转得更顺一些？

这是以下代码:

CSS:

i.icon-repeat {
  -webkit-animation: Rotate 500ms infinite linear;
  -moz-animation: Rotate 500ms infinite linear;
  -ms-animation: Rotate 500ms infinite linear;
  -o-animation: Rotate 500ms infinite linear;
  animation: Rotate 500ms infinite linear;
}
@-o-keyframes Rotate {
  from {-o-transform:rotate(0deg);}
  to {-o-transform:rotate(360deg);}
}
@-moz-keyframes Rotate {
 from {-moz-transform:rotate(0deg);}
 to {-moz-transform:rotate(360deg);}
}
@-ms-keyframes Rotate {
  from {-ms-transform:rotate(0deg);}
  to {-ms-transform:rotate(360deg);}
}
@-webkit-keyframes Rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
@keyframes Rotate {
  from { transform:rotate(0deg);}
  to { transform:rotate(360deg);} …

我有要制作动画的文字.例如,不是在悬停,而是从白色到红色不断变化,然后再次变回白色.

这是我目前的CSS代码:

#countText{
    color: #eeeeee;
    font-family: "League Gothic", Impact, sans-serif;
    line-height: 0.9em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0px 0px 6px ;
    font-size: 210px;
}

如果我有这样的CSS关键帧动画

@keyframes flash-red {
  50% {
    background: #f00;
  }
}

#goflash.anm-flash {
  animation-name: flash-red;
  animation-duration: .5s;
  background: rgba(255, 0, 0, 0);
}

然后我总是可以像这样触发动画:

var gf = document.querySelector("#goflash");
gf.classList.remove("anm-flash");
setTimeout(function() {
  gf.classList.add("anm-flash");
}, 50);

有没有办法覆盖动画持续时间/动画定时功能依赖于JavaScript？我希望能够说出像红色gf.animate("flash-red", "50%")背景gf或gf.animate("flash-red", "75%")让背景更像的东西rgba(255, 0, 0, .5).

理想情况下,相同的技术适用于过渡.gf.transitionTo("new-class", "50%")将元素显示为中途转换.

显然这flash-red只是一个例子 - 我希望能够用任何动画做到这一点.

我正在创建一个CSS关键帧动画,让一个元素看起来像是随便/缓慢地浮动一点.它嵌套在父母身上,一个使用translateX()慢慢地向左和向右移动,一个使用translateY()慢慢地和独立地上下移动它.

Chrome和Safari完美呈现,让它逐渐摇摆.它可以平滑动画(可能使用子像素平滑？),使一切看起来都非常流畅.然而,Firefox逐像素地为它设置动画,因此您可以看到它在每个像素处跳跃,而不是平滑地摇摆.

查看Chrome和FireFox中的JSFiddle来查看差异:http://jsfiddle.net/gonygdfz/6/

有没有办法让FireFox顺利渲染,而不是让它逐像素地跳跃？它在实际应用中非常引人注目.

标记:

<div id="parent">
    <div id="move-x">
        <div id="move-y">
            <div id="child"></div>
        </div>
    </div>
</div>

CSS:

#parent {
    width: 400px;
    height: 326px;
    background-color: yellow;
    background: url(http://paint.net.amihotornot.com.au/Features/Effects/Plugins/Render/Grid_CheckerBoard_Maker/Grid_CheckerBoard_Maker.Paint.NET.001.png) top center repeat;
}

#child {
    position: absolute;
    top: 75px;
    left: 150px;
    width: 100px;
    height: 100px;
    background-color: black;
    animation: range-y 10s infinite ease;
}

#move-x { 
    animation: range-x 10s infinite ease; 
    -webkit-animation: range-x 10s infinite ease;
}
#move-y { 
    animation: range-y 15s infinite ease; 
    -webkit-animation: range-y 15s infinite ease;
} …