标签: css-animations

我想在3D空间中制作动画.我知道这可以用CSS和HTML5,但我找不到一个实用的好教程!

我发现这个网站就是一个例子.您可以随时选择文本等.有人可以给出一个非常容易理解的小例子吗？我看到源代码,但我真的不明白它...

这是CSS3还是HTML5或两者兼而有之？

我需要多少JavaScript？

哪些浏览器支持这个？

我通过一些单页网站的例子,发现了这个:http://alwayscreative.net/.背景中的光盘无限旋转让我感到非常惊讶.我看过一些例子,但没有一个像这样.任何人都可以告诉我这是如何实现的.谢谢.

我的背景图片有一个指向右侧的箭头.当用户单击按钮时,所选状态会将箭头更改为指向下方(使用图像精灵中的不同背景位置).

无论如何使用CSS3设置动画,所以一旦单击按钮并且jQuery为其指定一个"选定"类,它将从右到下以动画(仅90度)旋转？(最好使用带有指向右侧的箭头的单个图像/位置)

我不确定是否需要使用变换或关键动画帧.

查看CSS动画来替换加载轮子中的动画GIF.

这里有一个基本的例子http://jsfiddle.net/kFmY8/448/

#me {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(360deg);}
}

我想改变帧速率,这样每个周期只有12帧.这将取消动画的流动性,使其更接近于它所替代的动画GIF.

可以这样做吗？

使用JavaScript/jQuery在HOVER上循环显示颜色

我正在尝试取一段文本,根据HSL 0deg和360deg之间的计算位置为每个字母着色,然后将颜色悬停在右边的颜色上.我知道这很奇怪,但请耐心等待.我想要的是悬停时的动画彩虹文字.

我已经涵盖了让所有这一切都发生一次的逻辑,但不能让悬停骑行行为发挥作用.

这是codepen.io的链接: http ://cdpn.io/txmlf

我尝试过使用JavaScript鼠标事件和jQuery的.hover().我最初的想法是设置鼠标输入的间隔,并在退出时清除它.

在这个非常重要的项目上,我真的很感激.

我在stackoverflow中搜索了很多与我的问题相关的问题,但我还没有找到一个用普通的JavaScript(不使用任何类型的库)来回答我的问题.

我的问题是我有一个CSS3的无限动画,即:

.clockwiseAnimation {
    top: 270px;
    left: 200px;
    position: absolute;

    -webkit-animation: clockwise 4s linear infinite; /* Chrome, Safari 5 */
    -moz-animation: clockwise 4s linear infinite; /* Firefox 5-15 */
    -o-animation: clockwise 4s linear infinite; /* Opera 12+ */
    animation: clockwise 4s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
@-webkit-keyframes clockwise {
    from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
@-moz-keyframes clockwise {
    from { -moz-transform: rotate(0deg) translateX(150px) rotate(0deg); …

我希望在数字快速变化时获得动画效果,例如:http://jsbin.com/kevalutupe/1/

我想单独使用这个CSS(我知道如何在JS中编写代码),我不想使用JS,因为我觉得锤击DOM并不是最好的解决方案.这完全可以用CSS吗？

我并没有对正确递增的数字感到困惑,我只是在效果之后.

我设置了一个简单的关键帧动画来旋转Y轴上的一个元素,但它很不稳定,我错过了一个属性吗？

.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 5px solid black;
  margin: auto;
  animation: rotateY 1s infinite;
}
@-webkit-keyframes rotateY {
  0% { transform: rotateY( 60deg); }
  20% { transform: rotateY( 120deg); }
  40% { transform: rotateY( 180deg); }
  60% { transform: rotateY( 240deg); }
  80% { transform: rotateY( 300deg); }
  100% { transform: rotateY( 360deg); }
}

<div class="circle"></div>  

在Internet Explorer中,此动画似乎会抖动.我正在阅读这个问题的答案,他们听起来好像有可能修复.

我不能真正使用图像,因为边框半径不是常数,我宁愿不使用动画gif.

我理解'摇摆'不是一个很好的描述,但我想不出任何其他的词来形容它.我没有用Opera/Safari测试它,所以如果你有其中任何一个,我想知道它们是否正确显示还是有问题.请在Chrome/Firefox中运行以下代码段并将其与Internet Explorer中的代码段进行比较:

@keyframes spin{
	0% {transform:rotateZ(0deg);}
	50% {transform:rotateZ(360deg);border-radius:60%;}
	100%{transform:rotateZ(720deg);}
}
@-webkit-keyframes spin{
	0% {transform:rotateZ(0deg);}
	50% {transform:rotateZ(360deg);border-radius:60%;}
	100%{transform:rotateZ(720deg);}
}
@-moz-keyframes spin{
	0% {transform:rotateZ(0deg);}
	50% {transform:rotateZ(360deg);border-radius:60%;}
	100%{transform:rotateZ(720deg);}
}
@-ms-keyframes spin{
	0% {transform:rotateZ(0deg);}
	50% {transform:rotateZ(360deg);border-radius:60%;}
	100%{transform:rotateZ(720deg);}
}
@-o-keyframes spin{
	0% {transform:rotateZ(0deg);}
	50% {transform:rotateZ(360deg);border-radius:60%;}
	100%{transform:rotateZ(720deg);}
}
#spinme{
	display:inline-block;
	position:relative;
	left:0;
	top:0;
	margin:0.2rem;
	width:0.8rem;
	height:0.8rem;
	border:0.2rem solid black;
	border-radius:0;
	outline: 1px solid transparent; /* require to remove jagged edges in firefox */
	transform:rotateZ(0deg);
	animation: spin infinite 4s;
	-webkit-animation: spin infinite …

使用Bootstrap的本机类,我有一个.list-group-item元素列表,其中有一些可点击的选项,显示为下拉列表.dropdown-menu.默认情况下,这可以正常工作,即使一个.list-group-item元素的下拉列表超过它下面的一个元素.

我之后添加的是一个animation声明,.list-group-item通过使用@keyframes动画来opacity:0消除s opacity:1.而作为其副作用,每个.list-group-item元素都在前一个下拉菜单中可视化.

(实际上没有z-index涉及任何声明,我只在标题中使用该术语来说明问题的表现)

我想知道这个溢出的问题是否有某种解决方法可以让我保留元素的淡入动画？

可以在下面的小提琴中看到一个例子(没有涉及或包含javascript,因为它不是必需的,因此两个下拉列表都在HTML代码中声明为打开以说明情况):

https://jsfiddle.net/o8ysz4qp/2/

HTML:

<div class="list-group-item fade-in">
  <div class="pull-right dropdown open">
    <button class="btn btn-primary">
      &darr;
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <p>Lorem ipsum dolor sit amet</p>
</div>

<div class="list-group-item fade-in">
  <div class="pull-right dropdown open">
    <button class="btn btn-primary">
      &darr;
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <p>Lorem ipsum dolor …