相关疑难解决方法(0)

因此,可以在鼠标输出上进行反向动画,例如:

.class{
   transform: rotate(0deg);

}
.class:hover{
   transform: rotate(360deg);
}

但是,当使用@keyframes动画时,我无法让它工作,例如:

.class{
   animation-name: out;
   animation-duration:2s;

}
.class:hover{
   animation-name: in;
   animation-duration:5s;
   animation-iteration-count:infinite;

}
@keyframe in{
    to {transform: rotate(360deg);}
}

@keyframe out{
    to {transform: rotate(0deg);}
}

什么是最佳解决方案,知道我需要迭代和动画本身？

http://jsfiddle.net/khalednabil/eWzBm/

我面临一个小问题,我以前从未真正处理过.我是初学网页设计师,最近我在网页上的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,我对它不太满意.

无论哪种方式,任何解决方案都将很乐意接受!非常感谢.

我知道使用jQuery可以轻松实现效果hide().这里的目标是用纯CSS代替它.淡出结果必须具有display:none元素占用页面布局上的零空间(因此visibility:hidden不是一个选项).

我display:none用一块animation代替的方法在对象上使用纯CSS制作了淡入效果transition,但是如果不使用javascript setTimeout方法我无法使其淡出效果.

这是我到目前为止所得到的:

function aaa(){
document.getElementById("b").style.display = "inline-block";  
}

function bbb(){
setTimeout(function(){ document.getElementById("b").style.display = "none"; }, 1000);   
}

#b {
  display: none;
  opacity: 0;
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;
  background: skyblue;
}

#a:hover ~ #b {
  opacity: 1;
  -webkit-animation: animate 1s; /* Chrome, Safari, Opera */ 
  animation: animate 1s;
}

@keyframes animate {
    0%   {opacity: 0;}
    100% {opacity: 1;}
} …

我有一个div,它应该只在悬停时出现.但是当我加载页面时动画也出现了.我希望隐藏动画div,直到我将鼠标悬停在另一个div上.有没有办法阻止加载页面时动画运行？

这是CSS:

#dim {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(200, 200, 200, 0.8);
  z-index:100;
  padding: 5%;

  animation: fadeout 1s;
  animation-fill-mode: forwards;
}

#dim:hover{
  animation: fadein 1s;
  animation-fill-mode: forwards; 
}

/* Animations */

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

这是一个CodePen:https://codepen.io/Martin36/pen/gWwmZO