标签: css-animations

我想制作一个带有几个齿轮的404页面，这些齿轮需要旋转一秒钟左右，然后慢慢停止旋转，最后完全静止。在我看来，这是一个很好的效果，可以让我的访客知道出了问题（机器/齿轮停止工作）。

我想用纯 css 来实现这一点，但无法通过谷歌搜索找到如何做到这一点。我也不知道如何使用 jQuery 来做到这一点。欢迎任何建议，但我仍然更喜欢 css3。

我正在尝试使用一些 SASS 变量来更改 CSS 动画，但它似乎拒绝了我尝试的一切。我也尝试过将其格式化为 mixin，但没有成功。$waitTime 和 $fadeTime 分别初始化为 4.5 和 .5，远高于以下代码片段：

        @keyframes fadeLoop{
            0%{
                height: auto;
                transform: translate(-10%, 0);
                opacity: 1;
            }
            (($waitTime/(($waitTime + $fadeTime)*10))*100) + %{
                transform: translate(10%, 0);
                opacity: 1;
            }
            ((($waitTime + $fadeTime)/(($waitTime + $fadeTime)*10))*100) + %{
                height: 0;
                overflow: hidden;
            }

            100%{

            }
        }

给出的错误是：

Error: Invalid CSS after "": expected keyframes selector (e.g. 10%), was "(($waitTime/(($..."
        on line 131 of /Users/CyrusRoshan/GitHub/Active/CS2-Redesign/css/style.scss

126:                0%{
127:                    height: auto;
128:                    transform: translate(-10%, 0);
129:                    opacity: 1;
130: …

考虑这个 JSFiddle 旋转示例

HTML：

<div class="container">
  <div class="coin">
    <div class="face heads">
      Hey!
    </div>
    <div class="face tails">
      Ho!
    </div>
  </div>
</div>

CSS：

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

.container {
  background-color: blue;
  width: 100px;
  height: 100px;
}

.coin {
  position: relative;
  top: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  animation-name: rotation;
  animation-iteration-count: infinite;
  animation-timing-function: …

我想添加 2 个过渡变换

但我想在第一次转换结束后开始第二次转换

元素应该缓慢地到达一个点，然后它应该到达另一个点

transform: translate(0%, 300%), translate(15%, -136%);

我的目标是有 4 个彩色方块，其不透明度间歇性地从 0 变为 1，以显示正在加载某些内容。

我使用 css 动画属性（见下文）来实现这一点 - 但它不起作用！

CSS

 animation: opacity 1.5s infinite 200ms

我已经在codepen上实现了它。有人可以告诉我如何修复它吗？

我试图围绕一个中心以圆周运动“环绕”两个单独的 div，但是我无法让两个 div 在我的 CSS 动画中遵循相同的圆形路径。

.container {
  width: 500px;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  background-color: pink;
  width: 100px;
  height: 100px;
  animation: battle 6s linear infinite;
  position: absolute;
  margin: 10px;
}

@keyframes battle {
  from {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

<div class="container">
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

提琴手

当我尝试超链接下面的代码时，它似乎弄乱了图像的包装并且只链接了图标而不是整个 flex-container。我试过尝试<span>元素，但没有任何成功。

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  transition: opacity .2s ease-in-out;
  flex-wrap: nowrap
}

.flex-item {
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-family: verdana;
  width: 100%;
  display: flex;
  flex-shrink: 1;
  justify-content: center;
  align-items: center;
  font-size: calc(8px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
  z-index: 10;
  flex-wrap: nowrap
}

.flex-item:before {
  content: '';
  float: left;
  padding-top: 100%;
}

.red-box …

我试图弄清楚如何Promise工作并使一个 CSS 动画一个接一个地运行。但是它们同时运行......

JS小提琴

let move_boxes = () => {
    return new Promise( (resolve, reject) => {
        resolve ('boxes moved!')
    })
};
let move_box_one = () => {
    return new Promise( (resolve, reject) => {
        resolve (document.getElementById('div_two').style.animation = 'move 3s forwards')
        console.log('box one moved!')   
    })

}
let move_box_two = () => {
    return new Promise( (resolve, reject) => {
        resolve (document.getElementById('div_one').style.animation = 'move 3s forwards')
        console.log('box two moved!')       
    })
}

move_boxes().then(() => {
    return move_box_one();
}).then(() => { …

脚步

1. 继续 REPL：https ://codesandbox.io/s/css-sidebar-animation-100-transform-wxchf ? file =/ App.svelte
2. 单击“切换侧边栏”按钮
3. 动画流畅，流畅
4. 取消注释第 28 行
5. 第 29 行评论
6. 再次点击按钮
7. heavy()调用toggleSidebar()函数时动画停止（在函数中）

问题

我不明白为什么会这样？

如果我更改-200px为-100%正在发生的事情会导致动画停止吗？

我该如何解决这个问题？如果我事先不知道侧边栏宽度怎么办？如果是动态的呢？

代码

.sidebar {
  animation: sidebar-slide-right 3s ease-out;
}

@keyframes sidebar-slide-right {
  0% {
    /* transform: translateX(-100%); */
    transform: translateX(-200px);
  }
  100% {
    transform: translateX(0);
  }
}

我有一个模态（用 React 编写，但这并不重要）在里面，我想添加一个手风琴。我有手风琴很好地上下滑动，我的问题是模式的高度根据手风琴过渡立即上下跳跃。

有没有办法让模态高度在手风琴旁边的过渡中增长？谢谢

编辑：改写问题。