标签: css-animations

#div {
position: absolute; top: 50px;
width: 100px; height: 100px; background: blue;
    -webkit-animation-name: shift;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-direction: reverse;
  }
 @-webkit-keyframes shift{
    from{
        top: 50px;
        left: 0px;    
    }
    20% {
        top: 150px;
        left: 100px;
    }
    to {
        top: 400px;
        left: 300px;
    }   
 }

http://jsfiddle.net/uVv65/2/ 为什么反向动画方向与正常相同？我以为它会来自

top: 400px;
left: 300px;

至

top: 50px;
left: 0px;  

@keyframes my-animation {
    0% {
        transform: translate(0, 40%) scale(0);
    }
    10% {
        transform: scale(1.1);
    }
    20% {
        transform: scale(1);
   }
   100% {
        transform: translateY(0%);
   }
}

我试图让我的元素弹出然后在 Y 轴上移动，但上面的方法不起作用。

我哪里错了？

我正在为我的项目编写 css 代码，我只能使用 css3 动画来为 div 设置动画。我尝试使用网络中提供的一些工具生成以下代码并生成了抖动效果动画。

div.error {
    background-color: #E49F5C;
    color: #fff;
    padding: 20px;
    line-height: 50px;
    border-radius: 5px;
    font-size: 13px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    min-width: 200px;
    text-align: center;
    height: 100px;
    z-index: 99999;
    animation: animationFrames linear 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames linear 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames linear 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames linear 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames linear 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%; …

我正在尝试动画(从左到右)带有页面加载转换延迟的下划线.我知道如何让它在悬停时工作,但不是在加载时.尝试这样的东西,但不知道为什么它不会工作.

.under {
    position: relative;
    text-decoration: none;
    display: inline-block;
}
.under::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    -webkit-transition-delay: 2s; 
    transition-delay: 2s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

我需要浏览器在长时间（er）操作完成之前更新我的 UI。目前浏览器正在等待一切完成后更新 UI，这意味着 UI 冻结 1-2 秒然后更新。

因此，用户单击 UI 中的按钮，然后执行此代码：

$('#mybutton').click(function(e) {

e.preventDefault();// prevent the default anchor functionality

$('#mainctrldiv').css('display', 'none');
$('#otherctrldiv').css('display', 'block');

var img = $('<img id="spareimg" style="display:none;">');
img.attr('src', canvas.getActiveObject().toDataURL()); // This is causing the delay!
img.appendTo('body');
}

这是canvas.getActiveObject().toDataURL()（一个 FabricJS 函数）花时间。我希望这发生在 2 个 div 已经明显地显示给用户之后，他们没有注意到。需要它在所有常用浏览器中工作！（移动和桌面）。

研究表明，在设置后立即读取 css 显示属性会强制浏览器重新绘制，所以我在设置这些属性后直接添加了以下代码，但延迟仍然发生：

$('#mainctrldiv').css('display');
$('#otherctrldiv').css('display');

非常感谢您的任何建议！

尝试使用CSS动画和变换应用缩放背景图像,但似乎有点滞后:

在线复制

我能做些什么吗？

@keyframes animateBg {
  from {
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    visibility: visible;
  }

  to {
    -ms-transform: scale(1.45, 1.45);
    transform: scale(1.45, 1.45);
  }
}
.animate-bg{
    -webkit-animation-name: animateBg;
    animation-name: animateBg;

}
.animate{
  -webkit-animation-duration: 5000ms;
  animation-duration: 5000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  -webkit-animation-timing-function: cubic-bezier(.3,0,.7,1);
  timing-function: cubic-bezier(.3,0,.7,1);
}

.bg{
    background-image: url(http://digital-photography-school.com/wp-content/uploads/flickr/2746960560_8711acfc60_o.jpg);
    height: 100%;
    width: 100%;
    display: block;
    position:absolute;
    z-index: -1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-position: center;
    background-size: cover;
}

我试图在使用css-modules和webpack构建系统的react应用程序中使用关键帧动画.

最简单的例子,重现问题:

.confirmRemove {
  animation: 150ms appear ease-in;
}
@keyframes appear { ... }

编译为:

.comparators__confirmRemove__32JB0 {
  -webkit-animation: 150ms :local(appear) ease-in;
  animation: 150ms :local(appear) ease-in;
}

@keyframes comparators__appear__KTI43 { ... }

应该是什么:

.comparators__confirmRemove__32JB0 {
  -webkit-animation: 150ms comparators__appear__KTI43 ease-in;
  animation: 150ms comparators__appear__KTI43 ease-in;
}

@keyframes comparators__appear__KTI43 { ... }

我做过的事情

1. 尝试了各种各样的洒水用途:当地的地方
2. 发现了一个未解决的问题539,但过去一周内没有任何行动或回应
3. 尝试版本28.1(最新),27.3和锯26也不起作用
4. 考虑放弃网站开发
5. 评论拉请求
6. 试图解决问题264的所有步骤

我需要的

一个已知版本的css-loader,适用于关键帧动画和css模块或解决方案,直到作者修复.

其他相关信息

节点版本7.9

当前相关的package.json:

"autoprefixer": "7.1.1",
    "css-loader": "0.28.1",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.11.1",
    "node-sass": "4.5.3",
    "sass-loader": "6.0.5",
    "style-loader": "0.18.1",
    "url-loader": "0.5.8", …

我试图在点击它时让轮子图像旋转(CSS变换+过渡).现在,我只能在使用'img:active'按住鼠标按钮时旋转它.我已经找到了答案,并且通常会感觉我应该使用onClick来打开和关闭动画的类,但我似乎没有做得对.我究竟做错了什么？这是我的代码,供参考:

class Wheel extends React.Component
{
  constructor(props){
    super(props);

    this.spin = this.spin.bind(this);
  }

  spin(e){
    e.classList.toggle('rotate');

  }
  render(){

    return (<div><img width="400" height="400" src="https://orig00.deviantart.net/0a38/f/2010/242/f/6/singapore_wheel_of_fortune_by_wheelgenius-d2xmb9v.jpg" onClick={this.spin}/>
</div>);

  }
}

ReactDOM.render(
  <Wheel/>,
  document.getElementsByClassName('container-fluid')[0]
);

CSS:

.rotate {
-webkit-transform: rotate(1095deg);
-webkit-transition: -webkit-transform 3s ease-out;
}

/* 
img:active {
    -webkit-transform: rotate(1095deg);
    -webkit-transition: -webkit-transform 3s ease-out;
}
*/

我已将所有内容放在CodePen上,网址为https://codepen.io/ejpg/pen/LmOVoR

先感谢您.

我的动画目前正在以方形运动移动。但是，我希望它从屏幕的左侧移动到右侧，然后在无限循环中再次返回。有人能帮忙吗？

.animation {
  width: 10px;
  height: 10px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background-color: red;
    left: 200px;
    top: 0px;
  }
  50% {
    background-color: red;
    left: 200px;
    top: 200px;
  }
  75% {
    background-color: red;
    left: 0px;
    top: 200px;
  }
  100% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
}

<div class="animation"></div>

这是我想做的：我想在从width：0到width：100vw开始的div上播放动画，然后当它回到width 0时又回到0 BUT，并且我想从左到右进行动画处理。对，就像“连续”动画，而不是“反向”动画。就像在动画的中间一样，您可以看到div，但是当它回到宽度0时，它应该从左到右消失（就像它开始的方式一样）。我不知道如何更好地解释这一点...

div {
  position: fixed;
  z-index: 100;
  background: red;
  width: 0;
  height: 100vh;
  top: 0;
  left: 0;
  animation: 1s in-out forwards;
}

@keyframes in-out {
  0% {
    width: 0;
  }
  50% {
    width: 100vw;
  }
  100% {
    width: 0;
    /* but starting to "disappear" from left to right, just like the way it appears */
  }
}

<div></div>