标签: css-animations

我想在完成后留下一个CSS动画属性,这可能吗？

这就是我想要实现的目标......

当用户登陆页面时,该元素应该被隐藏,3秒后(或其他),它应该淡入,一旦动画完成它应该留在那里.

这是一个小提琴尝试...... http://jsfiddle.net/GZx6F/

这是保存的代码......

<h2>Test</h2>

<style>
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

我知道如何用jQuery做到这一点......就像这样......

<h2>test</h2>

<script>
  $(document).ready(function(){
    $('h2').hide().delay(3000).fadeIn(3000)
  });
</script>

我在CSS中创建旋转地球效果.我用CSS创建了globe:

body {
  background-color: #111;
}

#earth {
    width: 300px;
    height: 300px;
    background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);
    border-radius: 50%;
    background-size: 610px;
    box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0),
    inset -6px 0 12px 4px rgba(255, 255, 255, 0.3);
    animation-name: rotate;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 12s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

@keyframes rotate {
    from { background-position: 0px 0px; }
    to { background-position: 500px 0px; }
}
@-webkit-keyframes rotate {
    from { background-position: 0px 0px; }
    to { …

这个简单的东西应该很容易实现,但是我把头发拉出来是多么复杂.

我想做的就是动画安装和卸载React组件,就是这样.这是我到目前为止所尝试的以及为什么每个解决方案都不起作用:

1. ReactCSSTransitionGroup - 我根本不使用CSS类,它是所有JS样式,所以这不起作用.
2. ReactTransitionGroup - 这个较低级别的API很棒,但它要求你在动画完成时使用回调,所以只使用CSS过渡在这里不起作用.总有动画库,这导致下一点:
3. GreenSock - 许可证对于商业用途IMO来说过于严格.
4. React Motion - 这看起来很棒,但是TransitionMotion对于我需要的东西来说却非常混乱和过于复杂.
5. 当然我可以像Material UI那样做一些技巧,其中元素被渲染但保持隐藏(left: -10000px)但我宁愿不去那条路线.我认为它很hacky,我希望卸载我的组件,以便清理它们并且不会使DOM混乱.

我想要一些易于实现的东西.在mount上,动画一组样式; 在卸载时,为相同(或另一组)样式设置动画.完成.它还必须在多个平台上具有高性能.

我在这里碰到了一堵砖墙.如果我遗漏了一些东西并且有一个简单的方法可以做到这一点,请告诉我.

给出以下CSS3动画....

<style type="text/css" media="screen">

.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {

  from {
    -webkit-transform: translateY(0px);
  }

  to {
    -webkit-transform: translateY(100px);
  }

}
</style>

<div class="drop_box">  
    Hello world
</div>

Hello World文本按预期动画下降100px.但是,在动画结束时,它会跳回到原始位置.

很显然,这在CSSland中很有意义.动画已应用,不再作用于元素,因此原始样式生效.虽然对我来说似乎有点奇怪 - 当然如果有人将元素设置为动画,那么人们会期望这种情况会持续存在吗？

是否有任何方法可以使结束位置"粘性"而不必使用Javascript在动画结尾处将类名或样式标记到元素上以修复其更改的属性？我知道转换仍然存在,但对于我所讨论的动画(该示例仅用于演示目的),转换不提供所需的控制级别.如果没有这个,似乎复杂的动画仅用于循环过程,其中元素以其原始状态结束.

我最近发现了如何"正确"使用CSS动画(之前我认为它们无法像在JavaScript中那样制作复杂的序列).所以现在我正在了解它们.

对于这个效果,我试图在一个类似进度条的元素上进行渐变"闪光"扫描.类似于对原生Windows Vista/7进度条的影响.

@keyframes barshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 1s 4s linear infinite;
}

正如你所看到的,我试图延迟4秒,然后在1秒内扫过闪光,重复.

但是,它似乎animation-delay只适用于第一次迭代,之后闪耀不断反复扫描.

我"解决"了这个问题如下:

@keyframes expbarshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 5s linear infinite;
}

from并且80%完全相同,导致动画长度的80%的"延迟".

这是有效的,但对于我的下一个动画,我需要延迟变量(特定元素的常量,但使用动画的元素之间的变量),而动画本身保持完全相同的长度.

使用上面的"解决方案",当我想要的是更长的延迟时,我最终会得到一个更慢的动画.

是否有可能animation-delay适用于所有迭代,而不仅仅是第一次？

我写了一个css3动画,它只执行一次.动画运行良好,但在动画结束时会重置.我怎么能避免这种情况,我想保留结果而不是重置它.

$(function() {
  $("#fdiv").delay(1000).addClass("go");
});

#fdiv {
  width: 10px;
  height: 10px;
  position: absolute;
  margin-left: -5px;
  margin-top: -5px;
  left: 50%;
  top: 50%;
  background-color: red;
}

.go {
  -webkit-animation: spinAndZoom 1s 1;
}

@-webkit-keyframes spinAndZoom {
  0% {
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
    -webkit-transform: rotateZ(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="fdiv"></div>

这是演示.

tl; dr: 我想用CSS创建一个实际的3D球体 - 而不仅仅是一种幻觉

注意:某些代码段示例没有响应.请全屏使用.

使用纯CSS,您可以创建和动画 三维立方体,如下所示:

#cube-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  perspective: 1500px;
}

.cube {
  position: relative;
  transform-style: preserve-3d;
  animation-name: rotate;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  0% {
    transform: rotate3d(0, 0, 0, 0);
  }
  100% {
    transform: rotate3d(0, 1, 0, 360deg);
    ;
  }
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: solid green 3px;
}

#front_face {
  transform: translateX(-100px) translateY(-100px) translateZ(100px);
  background: rgba(255, 0, 0, 0.5); …

我环顾四周但却找不到我想要的东西.

我目前在我的页面上有一个css动画,由以下内容触发:hover.当页面调整为使用媒体查询超过宽度700px时,我希望将其更改为"单击"或"触摸".

这就是我现在所拥有的:http://jsfiddle.net/danieljoseph/3p6Kz/

正如您所看到的,:hover将无法在移动设备上运行,但我仍然希望确保它只是通过单击而不是悬停来以相同的方式工作.

如果可能的话我宁愿使用css但也对JQuery感到满意.

我有一种感觉,这很容易做到,但我只是遗漏了一些非常明显的东西!任何帮助,将不胜感激.

这是css动画:

.info-slide {
  position:absolute;
  bottom:0;
  float:left;
  width:100%;
  background:url(../images/blue-back.png);
  height:60px;
  cursor:pointer;
  overflow:hidden;
  text-align:center;
  transition: height .4s ease-in-out;
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
}

.info-slide:hover {
  height:300px;
}

我试图通过一个擦拭动画来制作一个看起来像是充满水的圆圈.我遇到了两个错误,甚至无法解决第三个错误:

1. 它填补了错误的方式
2. 它填满后重置为空(黑色)*
3. 目前,我正在使用这些<img>标签,但我想将此效果移至body { background-image: }需要指导如何执行此操作.

到目前为止我尝试了什么:

#banner {
  width: 300px;
  height: 300px;
  position: relative;
}
#banner div {
  position: absolute;
}
#banner div:nth-child(2) {
  -webkit-animation: wipe 6s;
  -webkit-animation-delay: 0s;
  -webkit-animation-direction: up;
  -webkit-mask-size: 300px 3000px;
  -webkit-mask-position: 300px 300px;
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.25, rgba(0, 0, 0, 1)), color-stop(0.27, rgba(0, 0, 0, 0)), color-stop(0.80, rgba(0, 0, 0, 0)), color-stop(1.00, rgba(0, 0, 0, 0)));
}
@-webkit-keyframes wipe …

当你无限期地悬停它时,我有一个旋转的元素.当您将鼠标悬停时,动画将停止.简单:

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

.elem:hover {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

但是当你徘徊时,动画会突然停止,恢复到0度.我想动画回到那个位置,但是我在编写语法时遇到了一些麻烦.

任何输入都会很棒!