我写了一个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 {
-webkit-animation: spinAndZoom 1s 1;
}
@-webkit-keyframes spinAndZoom {
0% {
width: 10px;
height: 10px;
margin-left: -5px;
margin-top: -5px;
-webkit-transform: rotateZ(0deg);
}
100% {
width: 400px;
height: 400px;
margin-left: -200px;
margin-top: -200px;
-webkit-transform: rotateZ(360deg);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="fdiv"></div>这是演示.
我正在制作一个CSS动画,在那里,我正在移动东西,并希望它保持在最终位置,直到用户将鼠标移开.
body {
background: url('osx.jpg');
padding: 0;
margin: 0;
line-height: 60px;
}
@-webkit-keyframes item1 {
0% { bottom: -120px; left: 0px; }
10% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
100% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
}
@-webkit-keyframes item2 {
0% { bottom: -120px; left: 0px; }
10% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
100% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
}
@-webkit-keyframes item3 {
0% { bottom: -120px; left: 0px; } …我面临一个小问题,我以前从未真正处理过.我是初学网页设计师,最近我在网页上的div上使用了CSS悬停功能.当一个人在这个div上盘旋时,会发现另一张图片; 然而,当你"解开"时,新图像会消失,我希望它保持可见.
以下是我使用的代码示例:
#about {
height: 25px;
width: 84px;
background-image: url('about.png');
position: absolute;
top: 200px;
left: 0px;
}
#onabout {
height: 200px;
width: 940px;
position: absolute;
top: 60px;
left: 0px;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: 300;
display: none;
}
#about:hover #onabout {
display: block;
}
有没有办法用CSS解决这个问题？到目前为止我还没有使用任何JavaScript,我对它不太满意.
无论哪种方式,任何解决方案都将很乐意接受!非常感谢.
我有一个动画,其中div滑出视图,但是当动画完成时,div只返回到视图中的原点位置.如何在动画结束后使用CSS完全删除div或隐藏它？
这是标记:
<div class="container">
<div class="slide-box" id="slide-box""></div>
</div>
和css:
.slide-box {
position: relative;
width: 100px;
height: 100px;
background-image: url(../pics/red.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation: slide 5s linear 1;
}
@keyframes slide {
0% {
left: 0;
}
20% {
left: 20%;
}
40% {
left: 40%;
}
60% {
left: 60%;
}
80% {
left: 80%;
}
100% {
left: 100%;
overflow: hidden;
visibility: hidden;
}
}
我不希望它在动画的持续时间内淡出,我只是希望它在关键帧中达到100%时消失.提前谢谢!
我正在使用css3来动画一些文字.我只是试图将其淡入,然后仅在几秒钟之后(在其他动画之后)再次消失.我遇到的问题是我的文字渐渐消失,但即使我有关键帧完成@ opacity:1也会立即消失; 为什么我的文字消失了？这是代码:
<style>
#myArea {
height:250px;
width:300px;
position:relative;
overflow:hidden;
}
.text {
position:absolute;
z-index:1;
bottom:20px;
left:10px;
opacity:1;
}
#txt1 {
animation: txt1-fade 1s 1 ease-in;
animation-delay:1s;
}
#txt2 {
-webkit-animation: txt2-fade 5s infinite; /* Chrome, Safari, Opera */
animation: txt2-fade 5s infinite;
}
#txt3 {
-webkit-animation: txt3-fade 5s infinite; /* Chrome, Safari, Opera */
animation: txt3-fade 5s infinite;
}
@keyframes txt1-fade {
0% {opacity: 0; left:10px;}
100% {opacity: 1; left:10px;}
}
</style>
<body>
<div id="myArea">
<img src="images/backgrnd.jpg" />
<div …我在 CSS 延迟后为资产设置动画，但是一旦资产淡入，它就会消失。我最初将可见性设置为隐藏，似乎这就是动画结束后的位置。动画停止后，如何防止资产消失？
#asset {
position:absolute;
left:649px;
top:215px;
visibility: hidden;
animation: assetAnim 2s 1;
animation-delay: 1s;
}
@-webkit-keyframes assetAnim {
0% { opacity: 0.0; visibility: visible;}
100% { opacity: 1.0; visibility: visible;}
}
我正在使用 a@keyframes从 0% 到 50% 再到 100%。
在百分比期间，我想更改 svg 元素的行为。
@keyframes scale {
0% {
transform: scale(0);
transform-origin: 50% 50%;
}
50% {
transform: scale(1);
transform-origin: 50% 50%;
}
100% {
opacity:0;
}
}
.head_top{
animation: scale 1s ease-in-out 1 backwards;
}
SVG 元素：
<g><!-- HEAD TOP -->
<path class="head_top" d="M381,230.571h.008A191.367,191.367,0,0,1,555.278,342.83a177.166,177.166,0,1,0-348.555,0A191.373,191.373,0,0,1,381,230.571Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
</g>
所以元素从 0% 到 50% 从 ascale(0)到 ascale(1)
从 50% 到 100%opacity到 0。
这一切都有效。然而，在opacity(0)到达之后，该元素恢复可见。
我想我遗漏了一些东西， …