标签: keyframe

加载文档中的每个元素后，CSS3 关键帧动画是否开始？这是一个至关重要的问题，因为如果在整个页面正确加载之前启动动画，这将是一个问题。

需要一些帮助。

当在CSS lint中查看我的CSS时，他们不断地报告解析错误，即“预期的LBRACE错误”\n这是问题的屏幕截图：截图

他们在我的右括号上显示了问题。我检查了我的代码好几次，但我就是找不到问题所在。

我意识到如果我更改关键帧前缀顺序，则错误会显示在不同的行上（因此并不总是在右括号上）

这是我的代码，请看一下，如果有人看到错误，请告诉我，错误是什么，提前谢谢：

.flat-desktop-content {\n    background: url("../images/flat-desktop-content.svg") no-repeat scroll 0 0 transparent;\n    background-size: cover;\n    width: 360px;\n    height: 290px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 9;\n    -webkit-animation: flat-desktop 6s ease infinite;\n       -moz-animation: flat-desktop 6s ease infinite;\n            animation: flat-desktop 6s ease infinite;\n}\n\n@-webkit-keyframes flat-desktop {\n    0% { background-position: 0 0; }\n    50% { background-position: 0 -234px;}\n    0% { background-position: 0 0; }\n}\n\n@-moz-keyframes flat-desktop {\n    0% { background-position: 0 0; }\n    50% { background-position: …

我正在编写一个带有可变数量组件的滚动自动收报机，因此我需要translate3d它根据组件数量更改它的移动距离。我能想到的唯一方法是以某种方式从JSX文件中传递一个数字，但我找不到办法做到这一点。有没有办法传递CSSa 变量，或者其他一些方法来做我想做的事？

UIView 关键帧动画可让您创建执行一系列步骤的视图动画。该函数animateKeyframes(withDuration:delay:options:animations:completion:)有一个类型为 options 的参数UIView.KeyframeAnimationOptions。我希望这能让我选择一条整体时序曲线来应用于组合的动画集。它似乎应用了缓入、缓出的默认动画曲线，并且似乎不允许您像UIView.animate()方法族那样指定时序曲线。如果我想要线性定时、只是缓入或只是缓出怎么办？

我有一个带边框的div,我使用关键帧来扩展它的载荷,但我希望它从中心而不是从左到右扩展.

http://andylilien.com/index2015.html

css:

.navback { 
position:absolute;
bottom:0px;
padding-bottom:-8px;
width:100%;
height:17px;
background-color:#FFF;
border-top: 1px solid #d0d0d0;
z-index:999;
}   
@-webkit-keyframes expandline{
0%{width:0%;}
50%{width:50%;}
100%{width:100%;}
}
.navback{
-webkit-animation:expandline 2s;
}

所以我想在我的页眉中有一些元素，它们使用 CSS3 关键帧在页面加载时向上滑动和淡入。虽然动画本身运行良好，但具有延迟的元素会在动画之前以最终状态出现一瞬间。我目前不知道任何 JavaScript，所以我希望有一个纯粹在 HTML/CSS 中的解决方案。可以做到吗？

JSFiddle

* {
  font-family: 'Varela', sans-serif;
}

body {
  padding: 0;
  margin: 0;
  background-color: rgb(90, 120, 240);
}

a {
  text-decoration: none;
  color: inherit;
  font-size: inherit;
}

/***************************
HEADER
***************************/

.header-banner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  height: 250px;
  -webkit-animation: slide-in 1s;
  -moz-animation: slide-in 1s;
  -o-animation: slide-in 1s;
  animation: slide-in 1s;
  padding: 0 0 60px 0;
}

.header-banner h1,
.header-banner h2,
.header-banner a {
  font-family: 'Varela', sans-serif;
  color: white; …

我已经使用关键帧为 svg 路径编写了一个 css 动画

path {
  animation: anim 1s linear;
  animation-fill-mode: forwards;
}

@keyframes anim {
  50% {
    d: path('M20 20 L 20 20');
  }
  100% {
    d: path('M10 10 L 30 30');
  }
}

<path class="top" d="M10 10 L 30 10" stroke-width="2" stroke="black" fill="transparent" />

来源

如果您单击 svg，您可以看到正在运行的动画。现在，如果您再次单击，我希望它动画到其原始状态。我试过添加

transition: all 1s ease-out;

和

animation-direction: alternate;

但是仍然没有动画回到其初始状态。

所以问题是，我怎样才能动画回来？

我正在尝试使用@keyframes 为背景交换设置动画。背景是径向渐变。背景发生变化，但没有动画。

#mydiv {
background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);
width: 100%;
height: 1246px;
position: relative;
overflow: hidden;
animation: background-gradient 5s;
animation-iteration-count: infinite;
backface-visibility: hidden;
animation-timing-function: ease-in-out;
}

@-webkit-keyframes background-gradient {
0% {background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);}
25% {background: radial-gradient(circle at 90% 80%, #993399, #4d0019);}
50% {background: radial-gradient(circle at 90% 80%, #3333cc, #4d0019);}
75% {background: radial-gradient(circle at 90% 80%, #00ffcc, #4d0019);}
100% {background: radial-gradient(circle at 90% 80%, #cc9900, #4d0019);}
}

@keyframes background-gradient {
0% {background: radial-gradient(circle at …

我是 React 新手，特别尝试使用样式组件和关键帧。

我正在尝试让主页标题 h1 滑入。

我遵循了一些文档，但我觉得缺少一些东西或者我的东西不正常。

这是代码：

//Home.js

import React from "react";
import styled, { keyframes } from 'styled-components';


const Heading = keyframes`
  0% { top: -3.125em; }
  100% { top: 3em;
`;

const home = styled.div`
    min-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    color: white;
`;

const homeHeader = styled.div`
  h1 {
    font-weight: lighter;
    animation: Heading;
    animation-duration: 3s;
    animation-fill-mode: forwards;
  }

  // Animation
  animation: ${Heading}
  animation-duration: 3s;
  animation-fill-mode: forwards;
`;

export const Home …

我试图围绕一个中心以圆周运动“环绕”两个单独的 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>

提琴手