Webkit CSS动画问题 - 持久化动画的最终状态？
Webkit CSS动画问题 - 持久化动画的最终状态是指动画完成后元素应该保持的状态。在Webkit CSS动画中，可以通过设置动画的填充模式（animation-fill-mode）来控制动画结束后元素的最终状态。
常见的填充模式有以下几种：
- none：默认值，动画结束后元素会立即返回到初始状态。
- forwards：动画结束后元素会保持动画最后一帧的状态。这意味着元素会停留在动画结束时的位置和样式。
- backwards：在动画开始之前，元素会先应用动画的第一帧的样式。然后在动画结束后，元素会立即返回到初始状态。
- both：结合了forwards和backwards，元素会保持动画最后一帧的状态，并在动画开始之前应用第一帧的样式。
根据具体的需求和设计，选择合适的填充模式可以实现不同的效果。例如，如果希望动画结束后元素保持在最后一帧的状态，可以使用forwards填充模式。如果希望动画结束后元素立即返回到初始状态，可以使用none或backwards填充模式。
腾讯云相关产品中与Webkit CSS动画持久化状态无直接关联，但腾讯云提供了丰富的云计算产品和服务，如云服务器、云数据库、云存储等，可以支持开发者构建和部署各类Web应用。具体产品信息和介绍可以参考腾讯云官方网站：https://cloud.tencent.com/
相关·内容
给定以下CSS3动画...
<style type="text/css" media="screen">
.drop_box {
-webkit-animation-name: drop;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
}
@-webkit-keyframes drop {
from {
-webkit-transform: translateY(0px);
}
to {
-webkit-tra
浏览 0提问于2010-07-18得票数 71
回答已采纳
可能重复：
当我的动画div完成运行时，我想保持它的位置。现在，我在鼠标悬停时动画div，但是div返回到它的位置，即使我仍然在它上面徘徊。
只有当我鼠标离开的时候，才能让它回来吗？
div{
width:100px;height:100px;margin:1em;background:red
}
div:hover {
-webkit-animation-name: rotateThis;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count: 1;
-webkit-animati
浏览 4提问于2012-12-20得票数 2
回答已采纳
2回答
我正在尝试让一个头飞进来，然后当你悬停它的时候，它应该会摇晃(两者都有css3动画)。它以我想要的方式飞行，也会抖动，但在我将鼠标从元素中移走后，它会回到原来的边距-右边距(在flyin动画之前)，即使我设置了`-动画-填充-模式:前进；当我查看chromedevtools时，元素永远不会改变它的边距-右边距(即使动画可以工作..)。我能解决这个问题吗？
另外，有没有一种方法可以防止第一个动画在摇动动画之后再次发生？
飞行动画：
#name {
margin:40px 2% 40px 0;
-webkit-animation:flyin 1.5s;
-webkit-animation-fil
浏览 2提问于2012-11-27得票数 7
1回答
在操作结束后，元素返回到原始值。
这并不是完全出乎意料的，因为它在中
与所有动画元素一样，这只会操作表示值，当动画完成时，效果将不再适用。
但这是不需要的。我想找到一种使用XML动画来持久化更改的方法。
下面是SVG中的一个例子
<svg width="200" height="200" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink&
浏览 2提问于2014-12-21得票数 8
回答已采纳
我正在尝试在CSS (特别是webkit)中对形状进行简单的转换。动画按预期运行，但一旦完成，div将恢复到其初始状态。有没有办法让它保持最终的状态？
到目前为止，我的CSS如下：
@-webkit-keyframes rotate-good {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-90deg);
}
}
@-webkit-keyframes rotate-bad {
from {
-webkit-transform: rota
浏览 434提问于2011-08-01得票数 31
回答已采纳
我使用关键帧模糊和淡出一个div当文档被点击，我不知道为什么在动画完成后，div再次可见.
CSS
#red{
width:200px;
height:200px;
margin:50px;
background:red;
}
.blur{
-webkit-animation: fadeout linear 2.5s;
}
@-webkit-keyframes fadeout {
0% { -webkit-filter: opacity(100%) blur(0px);}
50% { -webkit-filter: opacity(100
浏览 0提问于2015-08-31得票数 1
回答已采纳
1回答
我试着制作一个简单的CSS动画
见小提琴：
我需要它保持在100%的宽度值，但由于动画它波夫回到0%。
@-webkit-keyframes meter1 {
0% {
width:0%;
}
100% {
width:100%;
}
}
如何解决这个问题，需要javascript还是jquery？
你好，克里斯
浏览 2提问于2014-06-25得票数 0
回答已采纳
1回答
我有一个css3 @keyframe动画，我在控制它时遇到了一点麻烦。
这是一个两部分的动画，有一个高大的矩形，它是平放的，在第一部分中，它假设旋转90度，向你向上平移z轴，同时也向左平移，然后完成翻转，所以再旋转90度，继续向左移动，然后向下移动。所以基本上就是在制作弧线动画的同时翻转。
我有三个问题，一个是动画在加载时播放，这是我不想要的，我只想让它在悬停时播放，还有两个问题，一旦它完成了，它会立即重置，但实际上应该发生的是，动画应该只是在鼠标离开时向后运行，三个动画在应该顺利播放的中途暂停了一秒钟。
我这里有一个小提琴，谢谢你在这方面的帮助！：
这里还有css：
.view {
浏览 4提问于2013-08-22得票数 2
回答已采纳
我已经实现了动画暂停，如下所述：
以下是旋转元素的CSS：
.is-rotating{
-webkit-animation: circle 55s linear infinite;
-moz-animation: circle 55s linear infinite;
-ms-animation: circle 55s linear infinite;
animation: circle 55s linear infinite;
}
我将一个is-paused类切换到问题onmouseover中的元素
.is-paused{
-webkit-animat
浏览 2提问于2012-12-14得票数 4
1回答
好的，我有这个旋转的CSS3动画(在动画中有一个重复超时)，但是我得到了这个非常奇怪的行为，动画看起来像动画一样“向后跳”。
我这里有一个JS的演示(编辑-请原谅长时间的延迟，它是动画的一个必要的部分-一个长超时)：
为了子孙后代，这是我的CSS
#logo { position: relative; float: left; width: 175; height: 75px; margin: 0 0 16px; padding: 0; }
@-webkit-keyframes rotate {
0%, 65%, 75%, 100% {
-webkit-transform:
浏览 2提问于2011-10-16得票数 1
回答已采纳
1回答
我有一个问题，在css动画。
当调用时，此动画工作正常。但是在我使用delay之后有一个问题。
问题是:如果Div在动画不可见后不可见，如果在动画可见后可见。
所以我需要==>在动画前不可见，动画后可见。
代码：
@-webkit-keyframes ph {
0% { opacity: 0; -webkit-transform: scale(0.1);}
25% {opacity: 0.9; -webkit-transform: scale(1.1); }
100% {opacity: 1; -webkit-transform: scale(1);}
}
谢谢。
浏览 0提问于2012-05-17得票数 0
当我使用以下代码使用CSS3旋转图形时(这只是webkit版本，但在我的样式表中有其他特定于浏览器的版本)。
.bottomSmallCogStopAnimating {
-webkit-animation-name: rotate;
-webkit-animation-duration: 5000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
我使用jQuery添加这个css类，通过删除动画名称来停止动画。
.stopAni
浏览 1提问于2012-07-10得票数 1
回答已采纳
2回答
据我所知，没有什么东西可以用css转换来实现，但是我们不能用css动画来实现，反之亦然。
也就是说，任何转换都有一个css动画等价物。例如，这个
.ablock:hover {
position: relative;
-moz-transition-property: background-color, color;
-moz-transition-duration
浏览 5提问于2011-08-09得票数 5
3回答
嗨，我试图用CSS3动画我的标志，但我希望它是动画后，几秒钟，所以我使用的animation-delay属性。它在Chrome上运行得很好，但是在Firefox中它确实延迟了动画，但是它所处的位置是动画的结束位置，然后在延迟之后动画就开始了。
HTML
<div class="logo"></div>
CSS
.logo {
position: absolute;
width: 100px;
height: 100px;
background: red;
transform: translate(25px,500px);
-webkit-animatio
浏览 0提问于2014-08-22得票数 2
回答已采纳
2回答
当我申请下一个学习的时候，我在一个投资组合里工作。因为我们生活在2012年，它有大量花哨的动画和CSS3垃圾，只是为了给他们‘我们需要这个家伙’的感觉。我现在有点小问题。
这是特定元素的一小部分：
/* This is the CSS of the elements with the id called 'fadein' */
#fadein {
-moz-animation-duration: 2s;
-moz-animation-name: item;
-moz-animation-delay: 4.5s;
-webkit-animation
浏览 1提问于2012-02-03得票数 37
回答已采纳
1回答
我用动画向左弹2次元素。到目前为止，一切都很好，但是在iOS上，动画的结尾已经不平坦了。它从左边的状态跳到正常的位置。没有动画。我错过了什么吗？
这是我的密码：
@keyframes bounceright {
0% {-webkit-transform:translateX(0px); transform:translateX(0px);}
50% {-webkit-transform:translateX(-20px); transform:translateX(-20px);}
100% {-webkit-transform:translateX(1px); transfor
浏览 2提问于2020-03-08得票数 0
回答已采纳
3回答
我正在尝试延迟CSS动画的触发(不是减慢动画本身，而是在开始之前延迟几秒钟)。并且在动画运行之前不应显示图像。我看过了其他问题，他们似乎没有解决这个问题。
我的小提琴：
CSS
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-w
浏览 1提问于2015-04-09得票数 8
4回答
我试图使用HTML/CSS制作这一面导航栏，其中我添加了一些悬停动画。每当您在图标上悬停时，它将缩放为双倍，而导航栏中的其余项目则会分散。但我的问题并不是因为我已经使用javascript和CSS实现了动画。问题是动画并不能顺利地朝相反的方向工作。因此，我试图添加简短的CSS动画，以检查反向动画转换是否正常工作，而不是。
下面是我的CSS代码：
ul{
list-style: none;
}
.navmenu{
position: fixed;
top: 50%;
transform: translateY(-50%);
}
浏览 6提问于2021-02-12得票数 1
回答已采纳
2回答
目前，有一种为CSS动画编写浏览器属性的通用方法：
@-webkit-keyframes wheel-keyframes {
100% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
@keyframes wheel-keyframes {
100% {
浏览 0提问于2014-10-19得票数 0
回答已采纳
1回答
我得到了如下内容，这是一个CSS动画，它在两个图像之间交叉衰减：
<div id="bg">
<img src="bg_01.jpg">
<img src="bg_02.jpg">
</div>
CSS
body {
background: black;
overflow-y: hidden;
}
#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%
浏览 1提问于2013-03-26得票数 2
2回答
我有一个简单的CSS3关键帧动画，当它运行时，我想要反转它。参见这里的代码：
@-webkit-keyframes transform-keyframes {
0% {-webkit-transform:translateX(0px) translateY(0px) rotate(270deg);}
25% {-webkit-transform:translateX(200px) translateY(0px) rotate(270deg);}
25.01% {-webkit-transform:translateX(200px) translateY(0px) rotat
浏览 1提问于2012-10-31得票数 2
2回答
我有一个奇怪的问题，我没想到会发生。给出的情况。情况就是这样：
我有一个隐藏的div弹出的按钮点击，并弹出‘在’关闭后。这是通过jQuery显示/隐藏处理的。对于UX，我想通过CSS添加一个微妙的弹出动画。我补充了以下内容：
.popout { animation: popout .2s ease;}
.popin { animation: popin .2s ease;}
@keyframes popout {
from {transform:scale(0)}
90% {transform:scale(1.1)}
to {transform:scale(1
浏览 4提问于2017-05-03得票数 1
回答已采纳
可能重复：
当我试图用jquery动画化页面中的图像旋转时，它无法理解元素的css属性"-webkit-transform“，有什么问题吗？
javascript代码：
$("body").toggle(
function(){
$("img").animate(
{
opacity:0.5,
"-webkit-transform":"rotate(180deg)"
},1000,function(){
//some
浏览 0提问于2012-07-15得票数 2
回答已采纳
看看这个JSFiddle：
在Firefox中，它的动画效果与预期不谋而合--里面的红色圆圈一圈一圈地转，外面的蓝色圆圈以不同的速度向另一方向旋转，淡入淡出。
这过去在Chrome中运行良好，但自从最新更新到21.0.1180.75m后，外部蓝色圆圈停止旋转。
以下是Chrome上动画的CSS：
@-webkit-keyframes spinPulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
40% { -webkit-transform:rotate(1
浏览 2提问于2012-08-15得票数 3
3回答
尝试用css3动画在一行中闪烁三个元素。我已经让它运行了，但是每个帧都有一个淡入淡出，我想要删除它。理想情况下，每个元素保持1秒可见，然后立即隐藏。
我尝试过在0%和99%设置动画，在opacity:1上设置帧，在opacity: 0上设置100%，但仍然没有成功。
我希望有一种方法可以消除褪色！
CSS：
.motion.play .frame {
-webkit-animation-name: flash;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
浏览 0提问于2013-03-18得票数 9
回答已采纳
2回答
延迟动画点击幻灯片的变化
、、、、
我有一个光滑的滑块，使用淡色过渡。每个活动幻灯片都有一个动画，可缩放幻灯片的背景图像。当幻灯片发生变化时，动画将从幻灯片中移除。
当手动单击新幻灯片时，比例会在转换完成之前跳回默认大小，然后在图像上创建跳转。我的问题是如何延迟动画的删除，这样我就不会跳回默认的比例？
下面是代码，您可以在这里看到一个示例：
JS
// Slider on Home Page
$('.homeSlider').slick({
draggable: true,
autoplay: true,
autoplaySpeed: 7000,
arrows: false
浏览 2提问于2017-03-15得票数 0
-这是一个动画的链接，它类似于我在我的网站中使用的内容。我已经发现，在safari动画延迟指定的时间运行，它应该。然而，在chrome中，动画被立即触发，就好像动画播放状态被忽略了一样。
我正在查看的Chrome版本是33.0.1750.152。
经过大量的研究，我找到了这个 (所以我知道我没有发疯)，但它从来没有得到真正的解决，我希望有人可能知道周围的工作，或者我使用的css有什么问题吗？
奇怪的是，在我的网站上还有其他的css3动画可以正常工作。
.one{
background-color: red;
opacity: 0;
-webkit-animation:
浏览 6提问于2014-03-27得票数 0
我设置了一个简单的JSFiddle来说明这个问题：
谁能告诉我为什么Safari会像预期的那样将动画元素显示为暂停状态，而在Chrome中动画却在运行？我使用的是Chrome 33.0.1750.146，不知道这是不是最新版本的bug。还是我完全漏掉了什么.
下面是暂停元素的CSS。
#blue-box {
width: 100px;
height: 100px;
background: blue;
-webkit-animation-name: blueBox;
-webkit-animation-play-state: paused;
-w
浏览 2提问于2014-03-13得票数 0
1回答
我需要关于webkit规模功能的帮助。
我有一个.css文件，其属性如下：
@-webkit-keyframes expand
{
from {-webkit-transform:scale(1)}
to {-webkit-transform:scale(1.2)}
}
.image-highlight
{
-webkit-animation-name: expand;
-webkit-animation-duration:0.2s;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-
浏览 1提问于2011-09-28得票数 0
回答已采纳
这是一个由两部分组成的问题：
哪种应用风格优先: CSS中的-webkit-transition规则还是jQuery中类似的$.css()方法？
如果我还在jQuery中使用-webkit-transition方法，那么在样式表中包含.css规则有什么意义吗？也就是说，如果我无论如何都要包含jQuery规则，添加-webkit-transition会使Safari/Webkit浏览器中的动画更有效率吗？(这也适用于-moz-transition )。
或者只使用jQuery是最好的？
谢谢!
浏览 1提问于2011-06-03得票数 3
回答已采纳
1回答
如果我在CSS动画中使用css属性，如果我也将该属性用于悬停效果，那么在google中，悬停将无法工作。
以下是动画代码：
@keyframes fadeInUpBig {
0% {
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
浏览 0提问于2014-06-27得票数 1
回答已采纳
1回答
嘿，伙计们，我在动态添加动画时遇到了困难，我基本上只是一个HTML/CSS的家伙，他避开JS，但偶尔使用Jquery，我知道如何编写jquery代码。因此，令人沮丧的是，我的困难在于，我有自己的鞋带：
现在，我已经为动画中的图像创建了CSS-3动画，动画代码如下所示：
@keyframes scalebg {
0%{
-ms-transform:scale(1);
-o-transform:scale(1);
-moz-transform:scale(1);
-webkit-transform:scale(1);
transform:scale(1)
浏览 1提问于2015-04-15得票数 0
回答已采纳
背景:我正在创建一个基本的动画，在一个男孩的形象走到一个女孩的形象，并停止。我正在使用CSS3 3-翻译来实现它。为了阻止手和腿的移动，我使用了Javascript事件-
boy.addEventListener("webkitAnimationEnd", animation_end);
和最后的Jquery
$('#boy-right-leg').css('-webkit-animation-play-state','paused');
我希望腿是直的，不管它是交叉的。
function animation_end() {
浏览 1提问于2016-11-12得票数 0
回答已采纳
10回答
因此，我了解如何执行CSS3 和。不清楚的是，我已经在谷歌上搜索过了，那就是什么时候使用哪一个。
例如，如果我想让球反弹，很明显动画是可行的。我可以提供关键帧，浏览器会做中间帧，我会有一个很好的动画。
然而，在某些情况下，无论哪种方式都可以实现上述效果。一个简单而常见的例子是实现facebook风格的滑动抽屉菜单：
这种效果可以通过如下转换来实现：
.sf-page {
-webkit-transition: -webkit-transform .2s ease-out;
}
.sf-page.out {
-webkit-transform: translateX(240px
浏览 70提问于2013-12-15得票数 176
回答已采纳
3回答
我写了一个css3动画，它只执行一次。动画运行良好，但在动画结束时将重置。我怎样才能避免这种情况，我想保留结果而不是重置它。
$(function() {
$("#fdiv").delay(1000).addClass("go");
});
#fdiv {
width: 10px;
height: 10px;
position: absolute;
margin-left: -5px;
margin-top: -5px;
left: 50%;
top: 50%;
background-color: red;
}
.go
浏览 1提问于2013-06-25得票数 83
回答已采纳
1回答
我正在尝试根据一个变量分配这个类来做动画。
我有像这样的东西
//animationOn is default to false.
<div ng-click="animationOn = !animationOn">
<div ng-class="(animationOn ? 'moveRight' : 'moveLeft')">
contents..
</div>
</div>
CSS
.moveRight{
-webkit-animati
浏览 2提问于2014-06-06得票数 0
1回答
标题基本上暴露了这一点。我有一个动画在Chrome (80)和Firefox (57)中工作得很好，但在Safari (12)中根本不起作用。 我所期望的是在屏幕上从左上角到右下角绘制一条直线。 我已经尝试了我的代码的十几种变体，以下是其中之一：(我尝试的所有变体在Chrome和Firefox中都工作得很好) #move {
top:0;
left:0;
width: 0;
height: 5px;
background: rgb(255, 255, 255);
position: absolute;
-webkit-anima
浏览 13提问于2020-04-20得票数 0
3回答
我有一个有文字的div：
<div>Rain.js</div>
及其CSS：
div {
-webkit-animation: fadein 2s;
color:black;
font-size:70px;
}
我想让div淡入，所以我制作了一个动画fadein，将div的opacity从0更改为0.1
@keyframes fadein {
from { opacity: 0; }
to { opacity: 0.1; }
}
如您所见，从 0到0.1的fadein按预期在2秒内发生。但2秒后，不透明度从0.1下降到1。
( 1)为何会
浏览 6提问于2015-11-06得票数 1
回答已采纳
2回答
我正在尝试在CSS3中获得微妙的背景运动动画，就像Xbox上的Metro中的图像瓦片或苹果幻灯片中的Ken Burns效果。问题是CSS3似乎将位置值四舍五入为最接近的整数，或者不支持子像素渲染，因此结果看起来非常不稳定。
我在这里做了个小手脚：
这是CSS
.test {
width: 400px;
height: 400px;
background: url('http://img.fusynth.com/600/artists/8.jpg');
background-size: cover;
background-position-
浏览 1提问于2013-02-17得票数 1
2回答
Webkit动画
、、
非常新的CSS webkit动画，并非常热衷于学习它！也有很多无知！所以这几个问题：
CSS网站的最佳演练/教程/官方网站是什么？
我需要安装webkit才能在我的CSS文件中编程吗？
谢谢和问候！
帕里贾特
浏览 2提问于2011-07-20得票数 0
回答已采纳
2回答
我正在尝试动画化一个-webkit-transform规则。我试过：
element.children().animate('webkitTransform': "translate3d(200px, 0, 0)", 200);
element.children().animate('WebkitTransform': "translate3d(200px, 0, 0)", 200);
element.children().animate('-webkit-transform': "translate3d(
浏览 8提问于2014-04-18得票数 0
回答已采纳
2回答
我试着在点击一些文本的时候用css转换来缩放图像。
在每次点击链接时，复选标记图像都会显示出来。然而，在iPhone Chrome中，复选标记没有动画--只是从一种状态跳到另一种状态，似乎忽略了css { transform :transform 200 to }。
它似乎在任何地方工作，除了iPhone Chrome浏览器-我已经尽我所能地尽我所能，但它完全令我困惑！
代码链接：
CSS:
.checkmark {
width: 35px;
-webkit-transition: transform 200ms;
transition: all 200ms;
}
.
浏览 0提问于2018-03-20得票数 13
回答已采纳
1回答
我试图实现平滑滚动，同时离开css :目标动画在机智和锚链接功能。
我认为问题来自于:target state被js操纵，从而覆盖了css动画。为了引起人们对所选#节的标题的注意，我在:target上稍微更改了填充，如下所示：
html
<section id="part_main">
<div class="text_box">
<h1>To <a href="#">Section</a></h1>
</div >
<
浏览 0提问于2016-01-20得票数 0
1回答
为什么浏览器使用前缀？
、、、
可能重复：
浏览器使用前缀实现某些技术的优势是什么？
例如，Google需要-webkit-前缀来呈现一些css3 3标记，比如动画(它需要“-webkit-动画：”)。
与直接将该技术应用到铬中相比，它有什么优势？
浏览 3提问于2012-06-04得票数 0
3回答
我正在尝试使用translate3d：通过CSS3事务来为元素添加动画。
// for start animation
$("#content")
.css("-webkit-transition", "all 100s");
.css("-webkit-transform", "translate(0, -900px)");
// for stop animation
$("#content")
.css("-webkit-transition", "
浏览 5提问于2013-03-19得票数 2
1回答
当页面使用纯CSS加载时，我试图让图片滑到左边。
所以，到目前为止，我已经得到了：和它似乎起作用了。我似乎无法解决的问题是，当动画结束时，图像是如何返回到视图中的。
#slide {
left:0;
width:268px;
-moz-animation-name: slideOut;
-moz-animation-iteration-count: once;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 1.5s;
-webkit-anima
浏览 0提问于2013-08-09得票数 2
回答已采纳
1回答
试图用关键帧动画一个简单的旋转。这一切都很好，但我讨厌它是如何突然停止鼠标关闭。我试过：
-webkit-animation-timing-function: ease-in-out;
但这只适用于框架，而不是整个动画。
这是我所拥有的，任何帮助都很感激。
@-webkit-keyframes Rotate {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
} }
悬停
a:hover {
-webkit-animation-name: Rotate;
-webk
浏览 3提问于2012-01-31得票数 2
1回答
我遇到了一些问题我的第一个动画在页面加载时工作正常，但我想在你悬停figure元素时触发另一个动画，如果你这样做，第一个动画会重复，但很明显，如果你把鼠标放在红色框上并强制它回到原来的位置，那么我的第二个动画就会工作:/
对于关键帧，元素是否属于它的第一个位置？我让它变得绝对，这是一回事。你可以在这里看到工作代码：，谢谢你的帮助！
<div id="wrapper">
<article>
<div id="sharing-wrapper">
<fig
浏览 1提问于2013-06-17得票数 0
2回答
在最初的悬停过程中，是否有一种方法可以停止动画的持续射击？我试图在悬停期间在图标上执行css动画。当我将鼠标移动到元素上时，图标会不稳定地反弹，直到我停止移动鼠标，有时会在动画期间挂起。我知道动画是在最初的悬停直到我停止，但我希望效果完全运行一次，并停止，除非我悬停。
HTML
<div class="box">
<a href="#" class="animate bounce"><img src="imagename.png" /></a>
</div>
CS
浏览 0提问于2014-04-29得票数 1
回答已采纳
4回答
想知道如何隐藏一组css3动画后的div。下面是我的代码：
#box {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 150px;
background-color: red;
}
#box:hover {
-webkit-animation: scaleme 1s;
}
@-webkit-keyframes scaleme {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
浏览 0提问于2012-04-03得票数 21
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
