标签: keyframe

使用 css@keyframes我试图在单击元素时将一些动画附加到元素上。

.animate {
    animation-name: action;
    animation-duration: 2s;
    animation-timing-function: linear;
    background-color: green;
} 

@keyframes action {
    0% {
        background-color: gray; 
    }  

   50% {
       background-color: red;
   }

   100% {
       background-color: green;
   }
}

演示

在.animate类上点击，并将盒子从灰色动画绿色。但是现在我想再次单击它时将动画恢复为灰色（切换功能）。我尝试使用相同的动画，animation-direction: reverse但没有播放动画。动画最初不应该播放（我遇到过几次）。任何建议我如何实现这一目标？

假设我有一个div元素,背景position: 0%;知道如何将位置更改为例如position: 100%;但悬停时使用关键帧

我似乎无法正确使用关键帧,它永远不会工作,我拥有所有最新的浏览器.

谢谢.

我想创建一个在网站上来回滚动的动画HTML"选框":

<div class="marquee">This is a marquee!</div>

和CSS:

.marquee {
    position: absolute;
    white-space: nowrap;
    -webkit-animation: rightThenLeft 4s linear;
}

@-webkit-keyframes rightThenLeft {
    0%   {left: 0%;}
    50%  {left: 100%;}
    100% {left: 0%;}
}

问题是,当它到达屏幕的右边缘时,选框不会停止; 它一直从屏幕上移开(短暂地出现一个水平滚动条),然后又回来了.

那么,当右边缘到达屏幕的右边缘时,如何使选取框停止？

编辑:奇怪的是,这不起作用:

50% {right: 0%}

我已成功使用@keyframes动画div,但我需要同时更改该div的子元素的属性.有没有办法从关键帧中解决子元素？

HTML

<div class="layoutBlocks" id="layoutBlock1">
    <div class="Wrappers">
      <div class="transparentBG"> <!--semi=transparent underlay-->
    </div>
</div>
<div class="Wrappers">
    <div class="articles" id="article1">
        <table>
            <tr><th>heading</th></tr>
            <tr><td>article</td></tr>
        </table>
    </div>
</div>

CSS

#layoutBlock1 {
    left: 0%;
    top: 0%;
    width: 49.75%;
    height: 49.25%;
    -webkit-animation: LlB1 1s;
    animation: LlB1 1s;
}

@-webkit-keyframes LlB1 {
    0%   {width:50%; height:50%; z-index: 1;}
    100% {width:100%; height:100%; z-index: 100;}
}
@keyframes LlB1 {
    0%   {width:50; height:50%; z-index: 1;}
    100% {width:100%; height:100%; z-index: 100;}
}

(所有额外的包装都是为了使半透明背景和圆角在Android上运行.)

(我认为变换可能比这里的关键帧更容易,但我的最终目标是在线上添加更多效果.)

当我的关键帧移动并调整layoutBlock1 div的大小时,我想让半透明底层不透明,但由于它是一个子元素,我无法弄清楚如何解决它.这可能吗？

我在文件中的块内定义SVG了@keyframeanimationS <style>,我使用该background-image属性嵌入到页面中.

动画在Chrome和Safari中完美运行,但在Firefox中则不然.在Firefox中查看图像本身时,动画将按预期工作.

    .loader {

      height: 3.375rem;

      width: 3.375rem;

      background: url("http://www.haaretz.co.il/htz/images/htz-spinner.svg");

    }

<div class="loader"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <style>
    .alef {
      fill: #fff
    }
    .alef-bg {
      fill: #09A5D9
    }
    .commet-wrapper {
      -ms-transform: translate(76px, 76px) scale(-1, .57) skewY(50deg);
      -webkit-transform: translate(76px, 76px) scale(-1, .57) skewY(50deg);
      transform: translate(76px, 76px) scale(-1, .57) skewY(50deg);
    }
    .commet {
      fill: #067194;
      -webkit-animation: color-change 2s linear infinite .8s, spin 1s linear infinite;
      animation: color-change 2s linear infinite .8s, spin …

JSFiddle

我正在尝试使用 CSS3 关键帧为包含在 div 内的来回移动的跨度设置动画。理想情况下，我希望关键帧看起来像这样：

@-webkit-keyframes backandforth { 0% {text-align:left;} 50%{text-align:right;} 100%{text-align:left;} }

但是由于无法为 text-align 设置动画，我一直在寻找可以设置动画以达到所需位置的替代属性。这就是我被困的地方。

我尝试在动画中途将 left 属性设置为 100%，但这最终将跨度推离了 div。我还尝试为 float 属性设置动画，但这没有用。

然后我看到了这个Stack Overflow 问题并尝试了顶级答案中的 JSFiddle。虽然它看起来像解决方案，但不幸的是它对我不起作用，因为我希望我的动画轻松地连续移动，并且在该动画的最后几秒钟，跨度停止。

任何帮助，将不胜感激。

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

对于上面的动画CSS代码,我想知道是否有任何方法可以从Javascript 传递margin-left和width作为参数的值.

这是一个CodePen，用于nth-child为滚动列表制作动画。

这是相关的CSS：

.element:nth-child(1){animation-delay:0s;opacity:0;}
.element:nth-child(2){animation-delay:5s;opacity:0;}
.element:nth-child(3){animation-delay:10s;opacity:0;}
.element:nth-child(4){animation-delay:15s;opacity:0;}
.element:nth-child(5){animation-delay:20s;opacity:0;}
.element:nth-child(6){animation-delay:25s;opacity:0;}
.element:nth-child(7){animation-delay:30s;opacity:0;}

带有动画卷

.element{grid-column:1/-1; grid-row:1/-1; margin-right:auto; animation:roll 35s cubic-bezier(.25,.1,.25,1) 1s infinite backwards;}

如您所见，前一个孩子正在覆盖下一个孩子。换句话说，当前孩子的持续时间太长，被下一个孩子踩了。

如何修改动画，以使每个子对象都有正确的顺序，并且没有一个子对象与下一个子对象冲突？

注：我花时间和尝试了很多不同的组合animation-delay，并animation:roll和他们都失败。发生了我不了解的事情，因此正在寻找教育以及可行的解决方案。

我可以让媒体查询在常规styled-components组件中正常工作，但是当我尝试在keyframe（通过 import from styled-components）中使用它时，它似乎根本不起作用。

试图让 div 动画到特定位置，但是当窗口 < 800px 时改变结束位置，我尝试过：

import styled, { keyframes } from 'styled-components';

// ... further down ...

const slideAnim = keyframes`
  100% {
    top: 20px;
    left: 30px;
  }

  @media (max-width: 800px) {
    top: 70px;
    left: 50px;
    }

`;

我还尝试将媒体查询放在100%块中：

const slideAnim = keyframes`
  100% {
    top: 20px;
    left: 30px;

    @media (max-width: 800px) {
       top: 70px;
       left: 50px;
    }
  }
`;

我对我想要实现的目标做了一个有用的交互式演示（问题代码在第 24 行）：https : //codesandbox.io/embed/fragrant-star-m71ct

breakpoint如果需要，请随意更改800 …

我正在尝试使用 CSS3 关键帧动画，当悬停在一个对象上时，会导致动画在另一个对象上触发。现在我只有一个简单的关键帧：

  @keyframes fill
  {
    from   {background: red; height: 0px; width: 0px;;}
    to {background: green; height: 150px; width: 150px;}
  }

  @-moz-keyframes fill /* Firefox */
  {
    from   {background: red; height: 0px; width: 0px;}
    to {background: green; height: 150px; width: 150px;}
  }

  @-webkit-keyframes fill /* Safari and Chrome */
  {
    from   {background: red; height:0px; width:0px;}
    to {background: green; height: 150px; width: 150px;}
  }

html如下：

<div class="box1">
    <div class="box2"></div>
</div>

如果我的样式表将动画属性应用于 .box1，它实际上可以为 .box2 设置动画吗？