标签: css-animations

我想要这种效果，但不是在整个身体背景上，而是在我的一个 div 的边界上。( http://jsfiddle.net/ANMPt/ )

@-webkit-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
}
@-moz-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
}
@-ms-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
}
body{
 -webkit-animation: blink 1s infinite;
 -moz-animation:    blink 1s infinite;
 -ms-animation:     blink 1s infinite;
}

我如何只定位边界？

或者：如果有人有更好的解决方案来在 CSS 或 JavaScript 中无限循环更改边框颜色：我全神贯注:-)

谢谢！

我正在尝试制作一个小的关键帧动画。

当用户将鼠标悬停在按钮上时，我希望背景图像稍微向右移动，然后再次向后移动。如此一点“反弹”运动。

在我的第一个示例中，我在CSS中使用了一个简单的悬停，将背景位置从91％更改为93％，这将导致在悬停时移动。

但是，当我尝试执行类似操作时，要使用名为的关键帧动画nextarrow，该动画将无法运行。

这是一个JSFiddle，显示了我的工作示例（button-one）和非工作示例（button-two）

我哪里出问题了？

http://jsfiddle.net/franhaselden/Lfmegdn5/

.button-two.next:hover{
   -webkit-animation: nextarrow 1s infinite;
   -moz-animation: nextarrow 1s infinite;
   -o-animation: nextarrow 1s infinite;
   animation: nextarrow 1s infinite;
}

@keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}

我正在尝试在主要内容 div 上而不是整个页面上制作一个以“书籍封面”开头的页面转换。您可以在几秒钟内看到封面，这段时间足以让您一目了然。然后封面应该像任何精装书封面打开一样“打开”，抬起前面的一侧然后翻转出视图，就像放大内页一样，封面超出框架。

我看过很多教程和生成器，似乎有某种翻转的“圣杯”，其中项目在中心的 y 轴上水平翻转，就像翻转卡片一样。我找不到任何东西可以帮助我弄清楚如何从一侧翻到另一侧，就像精装书封面那样。

我无法提供代码片段，因为我真的不知道从哪里开始。我可以从无数教程页面之一加载无数示例代码中的一个，但它只是随机的，毫无意义的动画翻转代码，我对如何自定义以完成我需要的事情零理解，否则我会做它已经而不是在这里。

任何人都可以指出我正确的方向吗？即使您只是指向我一些通用动画翻转代码的教程页面，并简单地告诉我要更改哪些属性才能使其像精装书一样翻转打开，那也是完美的。

我想我可以弄清楚如何在使用延迟加载暂停后触发它，但是如果您有更好的解决方案，那也很受欢迎。

我有一个CSS3动画,它可以在Chrome,Firefox,Safari中完美运行,但在IE11之后,一个完整的动画很奇怪地跳起来就像没有动画一样.然后它又开始了.http://screencast.com/t/7KpNdnk7XX1w

.main-circle {
	position: relative;
	height: 19.5rem;	
	width: 19.5rem;
	margin-left: 2rem;
	border-radius: 100%;	
	border: 1px solid black;	
}
.orbit {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5em;
	height: 5em;
	margin-top: -2.25em;
	margin-left: -2.25em;
	border-radius: 100%;	
	border: 1px solid black;
	animation-name: orbit;
	animation-iteration-count: infinite;	
	animation-direction: alternate-reverse;	
	animation-timing-function: ease-in-out;
	animation-duration: 1s;
	background: white;
}
@keyframes orbit {
	from { transform: rotate(355deg) translateX(-9.75em) rotate(-355deg); }
	to { transform: rotate(290deg) translateX(-9.75em) rotate(-290deg);}
}

<div class="main-circle">
	<div class="orbit"></div>
</div>

我有以下代码：

.dangerous_b {
    width: 636px;
    height: 72px;
    background-image: url('/media/anim.png');
    float: left;
    background-color: black;
    animation: bganim 100ms steps(1, start) infinite;
}
@keyframes bganim {
    from { background-position: 0px 0px; }
    to { background-position: 0px -72px; }
}

但是动画只播放一次。我究竟做错了什么？

编辑：请注意，动画播放一次，因此存在视觉差异。但我希望动画循环播放。

顺便说一句：这是我使用的图片： http://i.imgur.com/fA80qQc.png

第二次编辑：这是代码片段

.dangerous_b {
    width: 636px;
    height: 72px;
    background-image: url('/media/anim.png');
    float: left;
    background-color: black;
    animation: bganim 100ms steps(1, start) infinite;
}
@keyframes bganim {
    from { background-position: 0px 0px; }
    to { background-position: 0px -72px; }
} …

我有一个在开始时没有显示的元素.当我向它添加一个类时,我想让它淡入,使用CSS.

我发现这个教程使用了很好用于淡入淡出的关键帧.但是如果我想以同样的方式淡出,那么元素会立即被隐藏而没有动画.

基本上它看起来像这样:

.box {
  display: none;
  opacity: 0;
  animation: FadeOut 1s ease-in-out;

  &.active {
    display: block;
    opacity: 1;
    animation: FadeIn 1s ease-in-out;
  }
}

这是一个"工作"的例子:http: //codepen.io/MickL/pen/NAopXN

建立动态的“提示”系统面临着挑战。我想仅使用CSS来使元素闪烁。不知道是否有可能。通常，您应该定义动画的开始和结束颜色 （更新：这是不正确的。），但是因为我想让它在多种背景颜色上起作用，所以这不是一个选择。

我尝试了许多选项和Google查询（继承，currentColor等），但它所做的只是从白色/透明到＃ef9633。

有人有我可以尝试的选择吗？

码：

@keyframes nk-hint {
    0% { background-color: #XXX; }
    50% { background-color: #ef9633; }
    100% { background-color: #XXX; }
}
@-webkit-keyframes nk-hint {
    0% { background-color: #XXX; }
    50% { background-color: #ef9633; }
    100% { background-color: #XXX; }
} 

谢谢已经分配！

我有一排图片，我想在一个又一个的图像中淡入淡出。

 .jumbotron > div > div picture > img{

animation: fadein 6s;
-moz-animation: fadein 6s; /* Firefox */
-webkit-animation: fadein 6s; /* Safari and Chrome */
-o-animation: fadein 6s; /* Opera */

 }

 @keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { …

我正在尝试为 span 元素的宽度设置动画。

这是我的 HTML + CSS + jQuery 的样子：

.tt {
	position: absolute;
	width: 55px;
	height: 3px;
	background-color: #999997;
	top: 0;
	right: 10px;
	opacity: 0;	
}

.tt-expand {
	width: 55px;
	opacity: 1;	
	animation: 1s ease tt-expand;  
}

@keyframes tt-expand {

	0% {
	width: 0;
	}
	100% {
	width: 55px;
	}

}

.relative {
    display: inline-block;
    position: relative;
    padding: 20px 28px;
}

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

<script>
jQuery(document).ready(function($) {

setTimeout(function(){
	$( '.tt' ).addClass( 'tt-expand' );
}, 1000 );

});
</script>

<div class="relative"> …

我有一个正在动画/绘制的形状，这很好，当动画完成时，形状会在页面上保留几秒钟然后消失。

第一次尝试 CSS 动画，所以不完全理解为什么它会从页面上消失，我知道这可能是非常明显的事情，但任何帮助指针都将不胜感激。

body {
  background-color: #fff;
}

svg {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 600px;
  height: 600px;
}

.path {
  stroke-dashoffset: 1600;
  stroke-dasharray: 1600;
  -webkit-animation: draw 5s linear;
  -moz-animation: draw 5s linear;
  animation: draw 5s linear;
  fill-opacity: 0;
  -webkit-animation-delay: 1.2s;  /* Safari and Chrome */
  animation-delay: 1.2s;
}

.path-first-o {
  stroke-dashoffset: 1600;
  stroke-dasharray: 1600;
  -webkit-animation: draw 5s linear forwards;
  -moz-animation: draw 5s linear forwards;
  animation: draw 5s linear forwards;
  fill-opacity: …