标签: css-animations

为什么我不能用javascript重复一次CSS动画？

小提琴:http://jsfiddle.net/6XtSa/

我正在使用关键帧来不断更改<a>链接的字体颜色.在:hover我希望能够停止动画并定义字体颜色.

@-webkit-keyframes fontt {
  0%, 100% {font-size:50px;color:black;}      
  50% {color:red;}}
#box a {-webkit-animation: fontt 2s infinite;}
#box a:hover {color:#4480e8;-webkit-animation-play-state: paused;
}

是否可以暂停关键帧并更改字体颜色？

我试过用!important,

我试图把color:red;不同的命名约定(a:hover,#box a:hover,#box:hover a

暂停关键帧会覆盖我:hover吗？有没有办法设定优先权？

示例:http://jsfiddle.net/rvBS2/

使用Angular JS Animate和Css Animation,我试图创建一个类似于此处所见的bootstrap崩溃的展开/折叠(Accordion):http://getbootstrap.com/javascript/#collapse

我对可扩展项目有一个问题,它们根据扩展的"show"内容的高度来回弹出.请看我的Plunker以获得更多视觉效果

到目前为止我的工作:

var expandCollapseApp = angular.module('expandCollapseApp', ['ngAnimate']);

expandCollapseApp.controller('expandCollapseCtrl', function ($scope) {
    $scope.active = true;
    $scope.active1 = true;    
});

http://plnkr.co/edit/wBYsFM?p=info

我试图使用CSS3使鸟的拍打效果keyframes.它在谷歌浏览器上工作正常.它似乎不适用于Mozilla Firefox.

这是我的小提琴

我正在尝试使用css3自动更改背景图像.我有9张图片要在后台更改.我面临的问题是,它只显示滑动的第一个和最后一个图像,但不显示2,3,4,5,6,7,8.我有以下代码:

<img id="img1" src="images/1.gif">
<img id="img2" src="images/2.gif">
<img id="img3" src="images/3.gif">
<img id="img4" src="images/4.gif">

<img id="img5" src="images/5.gif">
<img id="img6" src="images/6.gif">
<img id="img7" src="images/7.gif">
<img id="img8" src="images/8.gif">

<img id="img9" src="images/9.gif">

这是CSS:

#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9 {
    width:610px;
    height:610px;
    position:scroll;
    z-index:-1;
    animation-name: test;
    animation-duration: 90s;
    opacity:0;
}
#img2 {
animation-delay:10s;
-webkit-animation-delay:10s
}
#img3 {
    animation-delay:20s;
    -webkit-animation-delay:20s
}
#img4 {
    animation-delay:30s;
    -webkit-animation-delay:30s
}

#img5 {
    animation-delay:40s;
    -webkit-animation-delay:40s
}
#img6 {
    animation-delay:50s;
    -webkit-animation-delay:50s
}
#img7 {
    animation-delay:60s;
    -webkit-animation-delay:60s
}

#img8 …

我是一个CSS3动画的新手,但我到处寻找,我找不到解决这个问题的方法.我有一个JSP页面,我希望背景慢慢从绿色变为蓝色,然后慢慢淡化相反的方式并无限地重复这个过程.

我现在可以顺利地从绿色到蓝色,但随后它立即变回蓝色.有没有办法播放两个动画从绿色到蓝色,然后从蓝色到绿色,并无限重复？

这是我现在的CSS代码:

@keyframes changeColorGreenToBlue {
    from { background-color: rgb(146,213,142);}
    to {background-color: rgb(133,184,222);}
}
@keyframes changeColorBlueToGreen {
    from {background-color: rgb(133,184,222);}
    to { background-color: rgb(146,213,142);}
}
.jumbotron {
    height: 100%;
    width: 100%;
    background-color: green;
    animation: changeColorGreenToBlue ease;
    animation-iteration-count: infinite;
    animation-duration: 4s;
    animation-fill-mode: both;
    animation-name: changeColorBlueToGreen;
    animation-iteration-count: infinite;
    animation-duration: 4s;
    background-size: cover;
    background-repeat: repeat-y;
    margin-bottom:1px;
}

它有点乱,因为我只是想尽一切努力让它运转起来.对于那个很抱歉!

基本上我正试图创建我在这个网站上找到的这种翻转效果

单击最右边的箭头(以查看在彩色部分最右侧悬停的箭头)可以看到对主标题和副标题的影响,这会使标题向上翻转.

我真的不知道怎么做这个效果,所以我在网上找到了一个例子,但问题是它有悬停状态,我无法理解如何让它在页面加载时自动启动而不是徘徊.正如你在这个例子中看到的那样,反面A和B都是彩色的,我希望从A面开始是背景白色,文字是白色然后将其翻转成彩色版本,所以用其他单词从不可见到可见.

在这里查看我的工作演示

此示例的代码如下:

/* Set-up */
body {
  color: rgb(6, 106, 117);
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 100%;
  background: #F4F6F8;
  padding: 3em 0 0 0;
  line-height: 62px;
  -webkit-perspective: 1000px;  /* <-NB */
}
/* Container box to set the sides relative to */
.cube {
  width: 30%;
  text-align: center;
  margin: 0 auto;
  height: 100px;
  -webkit-transition: -webkit-transform .33s;
  transition: transform .33s;  /* Animate the transform properties */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;  /* <-NB */
}
/* …

我正在建立一个带有2个项目集合的选框/旋转木马效果.使用两个item-collection跨度translateX并不困难(这里是小提琴),但我不喜欢每个循环结束时的空白空间.

知道两个集合的宽度可能不同,我怎么能达到"连续性"的效果,所以在第一个循环之后,第一个集合(青色)出现在第二个集合(洋红色)之后.

任何指向CSS或JS解决方案的指针都非常受欢迎... =)

我正在创建一个CSS转换,在父状态悬停时缩放内部元素.

但是,父级具有border-radius不会强制实际悬停的属性.当用户悬停元素时,没有显示border-radius.

我发现这与溢出有关,我试图让z-index父母高于孩子,但没有运气.

我的小提琴:https: //jsfiddle.net/muLhkx9m/1/

我为4行文本创建了一个文本淡入淡出动画。线条接连出现，到目前为止，还可以。现在，要求对所有这些动画进行无限循环。因为我对CSS动画还很陌生，所以我真的不知道该如何处理。我想我可能将整个事情设置错了。但是如何重建它，使我拥有所有4行的无限动画？

感谢您的提示！

PS：我附上代码片段，这也是那些喜欢的小提琴手：https : //codepen.io/SchweizerSchoggi/pen/xxKXyyv

PS2：我的问题与5年前另一位用户提出的另一个问题接近或相似，但是那个没有得到答案。这就是为什么我在这里和今天问我的问题。至少我得到了一个有帮助的答案。

body {
  font-size: 62.5%;
  font-family: Arial;
}

.animation-box {
  width: 75%;
  height: 30rem;
  background-color: darkblue;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}



@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 0%;
  }
}

.animation-box h1 {
  position: absolute;
  left: 5%;
  top: 0;
  font-size: 4em;
  color: white;
  font-weight: 400;
}

.first-line,
.second-line,
.third-line,
.fourth-line {
  font-size: 3em;
  position: absolute;
  left: 5%;
  top: 20%;
  opacity: 0; …