标签: keyframe

我有一个关键帧动画,在某些事件发生后会改变颜色,但我无法弄清楚如何在事件结束后停止动画？

HTML(只是为了调用事件):

<div id="prt1"></div>
<div id="prt2"></div>
<div id="prt3"></div>

CSS(只是样式和关键帧动画):

#prt1 {
height:20%;
width:5%;
border:1px solid black;
top:50%;
left:0%;
animation:prt1 2s infinite;
-webkit-animation:prt1 2s infinite;
display:none;
}

@keyframes prt1 {
0% {background-color:white;}
33% {background-color:black;}
66% {background-color:white;}
100% {background-color:white;}
}

@-webkit-keyframes prt1 {
0% {background-color:white;}
33% {background-color:black;}
66% {background-color:white;}
100% {background-color:white;}
}

#prt2 {
height:30%;
width:5%;
border:1px solid black;
left:0%;
top:50%;
animation:prt2 2s infinite;
-webkit-animation:prt2 2s infinite;
display:none;
}

@keyframes prt2 {
0% {background-color:white;}
33% {background-color:white;}
66% {background-color:black;}
100% {background-color:white;}
}

@-webkit-keyframes …

我有一个单字标题，分为两半，用@keyframe 制作动画并在页面中间相遇。问题：在到达页面中间的适当位置后，我需要两半之一从常规转换为斜体。由于我不打算使标题可点击，因此使用悬停毫无意义。有没有办法在不求助于javascript的情况下做到这一点......？

我有一个静止状态为红色的元素,当用户将光标悬停在其上时为绿色.我已经设置了缓解过渡0.4s.

我不希望颜色直接从红色变为绿色,而是希望它在中途点穿过黄色.因此,当用户将鼠标悬停在它上面时,它会在一个平滑过渡中从红色变为黄色变为绿色.这可能吗？

这是我目前的代码.

.element {
    background-color: red;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.element:hover {
    background-color: green;
}

我有一个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>

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

第一次尝试 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: …

我正在尝试创建一个简单的动画,当用户将鼠标悬停在元素上时,其中包含的另一个元素将填充其父元素.目前,我有一个JSFiddle就是这样做的.

但是,我想用一些其他功能完成这个,我不确定我在CSS3中实际可以做什么.

1. 我试图找到一种方法,当内圈完全填充其父级时(即当它的宽度/高度= 300px时),我希望填充暂停并且在动画完成后不会消失.

2. 当用户将鼠标移动到:悬停范围之外时,我希望动画反转方向而不是突然停止.

我已经用CSS3做到了这一点,但我不确定如果不使用Javascript就可以实现这两个功能.有没有人知道在CSS3中完全这样做的方式/有没有人知道是否有可能在CSS3中执行这最后两个功能,因为我似乎找不到任何东西.

.circle {
        width: 300px;
        height: 300px;
        background-color: white;
        border: 1px solid #000000;
        overflow: hidden;

        border-radius: 150px;
        -moz-border-radius: 150px;
        -webkit-border-radius: 150px;
}

.filler {
        width: 0px;
        height: 0px;
        background-color: red;
        border: none;
        position: relative;
        left: 50%;
        top: 50%;

        border-radius: 150px;
        -mox-border-radius: 150px;
        -webkit-border-radius: 150px;

        animation: empty 1s;
}

.circle:hover .filler {
        animation: fill 2s;
        -moz-animation: fill 2s;
        -webkit-animation: fill 2s;
        background-color: blue;
}

@keyframes fill
      {
        from   {background: red; height: 0px; width: 0px;}
        to {background: …

我希望能够为我的网站的背景颜色循环颜色过渡,因此当用户浏览时,它会在两种略有不同的色调之间缓慢切换,以改变他们的浏览体验.我想要的东西如下:

.background {
  background-color: #00A0D6;
  transition: background-color: 100s;
}

但随着background-color骑车回来#00A0D6,然后#00B1D7一旦到达就开始转换回来#00A0D6.从用户浏览网站的那一刻起,我也希望这种情况自动发生.

如果可能的话,我想在vanilla CSS中做到这一点.如果没有,有没有办法使用Javascript循环以这种方式循环值？可能与jQuery库？我希望尽可能保持平滑过渡的处理器效率最高的方法,因为这是一个在线RPG,它将同时进行许多其他过渡和数据库处理.

我目前正在从视频中提取关键帧。

代码：

while success:
    success, currentFrame = vidcap.read()
    isDuplicate = False
    limit = count if count <= 10  else (count - 10)
    for img in xrange(limit, count):
        previusFrame = cv2.imread("%sframe-%d.png" % (outputDir, img))
        try:
            difference = cv2.subtract(currentFrame, previusFrame)
        except:
            pass

这给了我很多相框。预期输出：计算帧之间的像素差异，然后将其与阈值进行比较并存储唯一的关键帧。

首次处理视频。请指导如何实现预期的输出

因此,我正在尝试使用Css关键帧在某些图像上实现水下效果.我正在使用"transform:skew"来做到这一点,但结果并不是很好,并且看起来并不是有机的.我希望这些图像以流畅的方式移动和扭曲,就好像它们在水下一样.

我的Css:

 @keyframes imgevento{
        0%, 100% {
            transform: skew(0deg, 0deg);

        }
        50% { transform: skew(2deg, 2deg);

        }
    }

    .imgevento{
        transform-origin:50% 50%;
        animation:imgevento 6s linear alternate infinite;
}

无论如何我能用css达到我想要的结果吗？

我在垂直设置图标动画以使它们无限地相互改变时遇到问题。

问题是我有两个图标，我需要它们以（第一个图标 - 青蛙，第二个图标 - 鸟）1 -> 2 -> 1 -> 2 的方式更改，这样看起来就像一个朝一个方向的完整循环（底部），我现在所拥有的是第一个图标到第二个图标根据需要进行更改，然后我的动画返回到第一个图标，向后而不是向前。

这是代码笔

如果有人能帮助我，我会很高兴。

@keyframes rotate {
 10%, 15% {
        transform: translateY(0);
 }
 25%,36% {
        transform: translateY(-45px);
 }
}