所以,我有这个-webkit-animation规则:
@-webkit-keyframes shake {
0% {
left: 0;
}
25% {
left: 12px;
}
50% {
left: 0;
}
75% {
left: -12px;
}
100% {
left:0;
}
}
还有一些CSS定义了我的一些动画规则box:
#box{
-webkit-animation-duration: .02s;
-webkit-animation-iteration-count: 10;
-webkit-animation-timing-function: linear;
}
我可以shake在#box这样的:
document.getElementById("box").style.webkitAnimationName = "shake";
但是我以后再也不能动摇了.
这只会震动一次:
someElem.onclick = function(){
document.getElementById("box").style.webkitAnimationName = "shake";
}
如何在不使用超时或多个动画的情况下通过JavaScript重新触发CSS动画？
也许这是一个明显的答案,但是
为什么地球上会浏览器决定创建自己的供应商前缀border-radius之类的？
我的意思是:为什么我要打字:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
是因为每个平台都认为"我们很酷,我们会想出一个更好的方法来做圆角吗？" 为一个输入三行似乎完全无法解释多余.
我正在阅读两个css属性之间的区别display:none,visibility:hidden并遇到了DOM reflow term.
声明是
display: none导致DOM重排哪里visibility: hidden没有.
所以我的问题是:
我正在使用CSS着色器+动画.我的着色器类定义如下:
.shader{
-webkit-filter :custom(url(v.vs) mix(url(f.fs) multiply destination-over), 200 200);
-webkit-animation-name: test;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1
}
我试图使用jquery动态设置/取消设置样式(着色器+动画)$('#holder').addClass('shader');和$('#holder').removeClass('shader');
然而,奇怪的是当我重置类时(例如,在removeClass之后调用addClass),只有着色器被重新应用但动画没有(我已经挂钩了AnimationStart事件以查看我的动画何时开始).任何人都知道为什么会这样,我怎么解决它？
编辑:我在这里添加了JSfiddle代码段的简化版本.基本上我是将动画重新应用到div两次,但实际的动画只在第一次被调用.
我有一个简单的车轮旋转动画.我试图使用滑块(输入范围)控制旋转轮的速度.我已设法做到这一点,但每次我更改动画时动画重新启动(它跳转).寻找一种解决方案,以创造一个平稳的速度增长.当用户增加滑块的值时,轮子以增加的速度旋转.
在下面的代码中,#loading是旋转轮.
$(document).on('input', '#slider', function() {
var speed = $(this).val();
$('#speed').html(speed);
$("#loading").css("animation-duration", 50 / speed + "s");
});#loading {
position: absolute;
left: 0;
right: 0;
margin: auto;
transform-origin: 50% 50%;
animation: rotateRight infinite linear;
animation-duration: 0;
}
@keyframes rotateRight {
100% {
transform: rotate(360deg);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img id="loading" src="//placehold.it/100">
<input type="range" min="0" max="100" value="0" class="slider" id="slider">
<p>Speed: <span id="speed"></span></p>在没有javascript的情况下点击CSS3动画的方向的最佳方法是什么？
我最近一直在探索复选框黑客攻击并试图想出一种方法,只有一组关键帧,而不是两组,一组前进,一组回来.这可能吗？或者有没有办法用一套呢？
例如,我有以下关键帧:
@keyframes moveIt {
0% {
transform: translateX(0);
width: $size;
}
50% {
width: $size*1.2;
}
100% {
transform: translateX(50px);
width: $size;
}
}
@keyframes moveItBack {
100% {
transform: translateX(0);
width: $size;
}
50% {
width: $size*1.2;
}
0% {
transform: translateX(50px);
width: $size;
}
}
有什么方法可以将它减少到只有第一组吗？然后从100%开始回来并回到0%？
这是我想要实现的一个例子.
所以我试图在我的投资组合网站上为一些文本实现悬停状态动画.简而言之,文本需要从黑色或白色(可以改变),白色到蓝色动画.
我尝试过使用以下内容
@keyframes textAnimation {
0% {
color: inherit
}
50% {
color: white
}
100% {
color: blue
}
}
但是,因为它是一个悬停动画 - 如果我停止悬停,动画会切换并恢复到之前的值.我有一个伴随动画(Purely CSS)与悬停一起使用,所以我需要它基本上将动画反转回原始值.
我也试过在<span>使用中添加类setTimeout...但是这是一个非常密集的页面,从过去的经验来看,以这种方式混合JS + CSS - 并且时间很完美 - 在低端是超级难的机器.
PS我正在使用React.js
任何想法将不胜感激.
有没有一种方法可以在不克隆元素，不重排DOM，等待（setTimeout / onAnimationEnd）的情况下重新启动CSS动画？
为什么我不能用javascript重复一次CSS动画？