标签: css-animations

我想移动 HMTL 中的一个元素。很简单。问题是元素应该以指定的角度移动，例如 30\xc2\xb0 度。我如何在 JavaScript 中（以及 CSS 旋转）做到这一点？

感谢所有的答案。

我的代码在这里显示复选标记的动画。

它有效，但问题是，它不循环。它只动画 1 次。我想要的是每 2 秒动画一次。

Codepen链接： http: //codepen.io/haniotis/pen/KwvYLO

CSS 看起来像这样：

@import "bourbon";

$color--green: #7ac142;
$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: $color--green;
  fill: none;
  animation: stroke .6s $curve forwards;
}

.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px $color--green;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: …

我正在尝试构建一个类，我可以轻松地将其放到一个元素上，该元素在渲染时会淡入视图，但当我设置display为“无”时会立即隐藏它。

到目前为止，我构建的类将元素淡入视图中，但隐藏或元素淡入隐藏也有轻微的延迟。

到目前为止，我已经使用了该类的动画fadeIn：

@keyframes fadeIn {
   from    { opacity: 0; }
   to      { opacity: 1; }
}

.fadeIn { 
   animation: fadeIn 0.2s both ease-in; 
}

这个淡入但隐藏时有延迟

另一种看起来像这样：

.fade-show {
   opacity: 1;
   transition: opacity 2s ease-in;
   -moz-transition: opacity 2s ease-in;
   -webkit-transition: opacity 2s ease-in;
}

这实际上并没有淡入和延迟隐藏。

我只是希望某些东西在渲染或display设置为时淡出block，但在display设置为时立即隐藏none。

该类的用法如下：

<div class="fadeIn" >I fade in but dont fade on hide</div>

我有一个关键帧，可以缓慢放大和缩小通过 css 背景图像渲染的主页背景图像。它在 Chrome 和 Firefox 上运行良好，但在 Safari 上运行不佳。这是我所拥有的。

@keyframes shrink {
  0% {background-size: 100% 100%;}
  100% {background-size: 115% 115%;}
}

@-webkit-keyframes shrink {
  0% {background-size: 100% 100%;}
  100% {background-size: 115% 115%;}
}

@-ms-keyframes shrink {
  0% {background-size: 100% 100%;}
  100% {background-size: 115% 115%;}
}

@-moz-keyframes shrink {
  0% {background-size: 100% 100%;}
  100% {background-size: 115% 115%;}
}

@-0-keyframes shrink {
  0% {background-size: 100% 100%;}
  100% {background-size: 115% 115%;}
}


.header_container {
  animation: shrink 20s infinite alternate;
  -ms-animation: shrink 20s infinite …

我已经有一个滑动的文本从右侧到左侧，但我却不能从中获得成功的幻灯片，使从这项工作，其左到右侧。

所以<h1>从右侧滑入并向左侧滑动。并且<h2>应该从左侧滑入并向右滑动。文本应保留在屏幕的右侧。同时播放动画。

h1 {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  -moz-animation-name: slidein-left;
  -webkit-animation-name: slidein-left;
}

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

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

h2 {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  -moz-animation-name: slidein-right;
  -webkit-animation-name: slidein-right;
}

@-moz-keyframes slidein-right {
  from {
    margin-right: 100%;
    width: 300%
  }
  to { …

我正在尝试使用来自https://materialdesignicons.com/的图标制作一个加载微调器，但该图标不仅会旋转，还会从中心略微移动。

我有这些风格：

@keyframes spin-animation {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.spin:before {
  display: block;
  transform-origin: center center;
  -webkit-backface-visibility: hidden;
  -webkit-animation: spin-animation 2s linear infinite;
  animation: spin-animation 2s linear infinite;
}

是<i class="mdi mdi-something spin">元素。所以它添加:before了图标的内容。此元素位于绝对定位的包装器中，具有display: flex, 水平和垂直居中。

问题是当图标旋转时，它不会围绕其中心旋转。轴稍微移动。图标不会停留在一个居中的位置，而是会轻微移动。

我试过了：

• 为i元素赋予宽度和高度
• 为:before元素赋予宽度和高度
• 将spiner动画从移动i到:before
• 我在 stackoverflow 上发现的不同样式，例如 transform-origin: center center;

图标本身具有相同的功能x，y dimensions因此应该没有问题。旋转时尺寸会发生变化，但我想这是正确的吗？

我正在使用以下代码片段使用 SVG 绘制圆弧：

https://jsfiddle.net/e6dx9oza/293/

describeArc当调用方法计算路径时，将动态输入圆弧的起始和结束角度。

有谁知道如何在绘制弧线时对其进行动画处理？基本上，我希望弧线能够延迟地平滑绘制，而不是像当前情况那样一次性绘制。

我试图做一个文本显示CSS动画像这一个。使用::before和::after似乎是一种过于复杂的方法，因此我尝试使用线性渐变背景颜色、背景位置或其他可能更简单的方法来执行此操作。

:root {
  --primary-rgba: rgba(17,184,106,1);
  --secondary-rgba: rgba(255,255,255,1);
}

@keyframes slidein {
  0% {
    background: transparent;
  }
  25% {
    background: linear-gradient(90deg, var(--secondary-rgba) 0%, var(--secondary-rgba) 50%, var(--primary-rgba) 50% var(--primary-rgba) 100%); 
  }
  50% {
    background: var(--secondary-hex);
  }
  75% {
    background: linear-gradient(90deg, var(--primary-rgba) 0%, var(--primary-rgba) 50%, var(--secondary-rgba) 50% var(--secondary-rgba) 100%); 
  }
  100%   {
    background: transparent;
  }
}

我什至想知道向动画添加更多帧是否会使其按照我想要的方式工作，并尝试在一堆（重复）帧中进行黑客攻击。仍然没有运气。

在发现CSS 过渡可能还不支持渐变之后，我尝试使用背景位置来显示文本，但没有成功。

这些方法中的任何一种都可行吗？

尝试一些带有样式组件和关键帧的东西。这是关于动画文本颜色。它在使用十六进制代码或 css 颜色名称时确实有效。但是，我想使用我在主题中定义的颜色。不过好像没用？我如何在这里使用道具？

const changeColor = keyframes`
    0% {
    color: ${props => props.theme.color.somecolor};
    }
    100% {
      color: ${props => props.theme.color.somecolor};
    }
`;

const ColorChange = css`
  -webkit-animation: ${changeColor} 3s infinite;
  -moz-animation: ${changeColor} 3s infinite;
  -o-animation: ${changeColor} 3s infinite;
  -ms-animation: ${changeColor} 3s infinite;
  animation: ${changeColor} 3s infinite;
`;

const ColorChangeComponent = styled.span`
  ${ColorChange}
`;

有没有办法在不使用所有nth-child()选择器的情况下编写 CSS 代码？我想让代码更具可扩展性，以防将来我想添加更多雪花。

body {
 background-color: red;
}
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall {
  0% {
    top: -10%;
  }
  100% {
    top: 100%;
  }
}
@-webkit-keyframes snowflakes-shake {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(80px);
    transform: translateX(80px);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes snowflakes-fall {
  0% {
    top: -10%;
  }
  100% {
    top: 100%;
  }
}

@keyframes snowflakes-shake { …