标签: css-transitions

我有一些我想用CSS3 淡化的元素.它可以简单地通过2个教学班,做和,但问题是褪色的因素是一些下拉菜单,它具有以下要素,所以即便有不透明度:0,其仍然"点击"和元素下它都没有.opacity: 0opacity: 1

如果我添加display: none;属性,则元素不是动画的.

是否可以用css来避免它？

我检查了这个,但没有找到有效的解决方案

http://jsfiddle.net/Eh7jr/

我有一个具有无限css3动画的元素,当元素悬停时,它会被更改为另一个无限动画.一切都还可以,但有时动画变化过于有弹性,有没有办法让动画在动画之间平滑(可能在动画之间将元素带到初始状态)在mouseenter和mouseleave上？两个动画的开始和结束状态是相同的.

@keyframes first-animation {
0% { transform: scale3d(1,1,0);}
50% { transform: scale3d(0.8,0.8,0); }
100% { transform: scale3d(1,1,0); }
};

@keyframes second-animation {
0% { transform: scale3d(1,1,0); }
70% { transform: scale3d(0.7,0.7,0); }
80% { transform: scale3d(0.9,0.9,0); }
100% { transform: scale3d(1,1,0);  }
};

div{
animation: first-animation 1.7s ease-in-out infinite;
}

div:hover, div:focus{
animation: second-animation 1.1s ease-in-out infinite;
}

关于我的图像,我有一个小问题,如此处所示(http://jsfiddle.net/garethweaver/Y4Buy/1/).

.img-blur:hover {
  -webkit-filter: blur(4px);
  transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
}

<img src="http://i.imgur.com/Vp5StNs.png" class="img-blur">

当鼠标悬停时图像会模糊,但当我将鼠标移开时它会直接恢复正常,我怎样才能让它从模糊中消失？

还有,鼠标悬停时有没有办法显示文字？当用户将鼠标悬停在图像上时,我希望它模糊,然后显示一些文本,例如"了解更多".只有css这也可能吗？

干杯

我在Safari和Firefox(Mac/Yosemite)上遇到这个奇怪的问题,当鼠标悬停在转换元素上时,几乎所有文本都会闪烁.

示例gif :( Firefox,Yosemite)

.usp {
   //USP has an icon that is defined below
    opacity: .4;
    @include transition(all .3s ease-in-out);


    &:hover { 
        opacity: 1;
        @include transition(all .3s ease-in-out);


        .icon {
            @include transform(scale(1.1));
            @include transition(all 1.7s ease-in-out);
        }
    } // :hover
} 

.usp .icon {
    display: block;
    height: 75px;
    width: 75px;
    // Insert background-image sprite (removed from this example)
    @include transition(all .3s ease-in-out); 
    @include transform(scale(1.0));
}

我尝试过以下的事情:

将这些样式的每种可能组合添加到正文,转换元素和/或其父级

-webkit-transform-style:preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
 backface-visibility: hidden;
-webkit-filter: opacity(.9999);
-webkit-font-smoothing: antialiased; …

似乎有很多关于同一问题的问题,但似乎找不到满意的答案......我有:

1 container (flex) (green)
   2 columns (block) -> left: red, right: orange
      in the left column, I have two divs (green) who follow each other 'menu1''menu2'

这两个菜单本身都包含在div(黑色)中,因此当我旋转它时,两个菜单是垂直的而不是水平的(旋转90度)

目标是让顶部包装器/容器(绿色)占据垂直黑色包装的高度,并使左列包装器不大于旋转的黑色包装器的"宽度".

我得到的内容在以下示例中说明:

https://jsfiddle.net/pg373473/

<div id='container' style='display: flex; border: 3px solid green; flex-direction=row'>
  <div id='leftbox' style='position: relative; display: block; border: 3px solid red'>
    <div id='textwrapper' style='transform-origin: bottom left; transform: translateY(-100%) rotate(90deg); border: 2px solid black;'>
      <div style='border: 3px solid green; display: inline-block'>menu 1</div>
      <div style='border: 3px solid green; display: inline-block'>menu 2</div>
    </div>
  </div> …

我最近一直在研究改进我网站上的动画 - 更具体地说是移动设备上的导航下拉菜单.

在这方面,我偶然发现了以下案例,我希望能够获得更深入的知识.

情况是,在转换/动画时transform: translate3d(),似乎浏览器在使用%而不是使用时需要更多计算px.例如,在我的测试中,似乎从转换transform: translate3d(0, 500px, 0)到transform: translate3d(0,0,0)需要更少的计算并且运行比转换更平滑transform: translate3d(0, 100%, 0).

更新:经过进一步测试,我发现使用100vh/ 100vw绕过/减轻了使用百分比的问题.在元素具有窗口的已知百分比宽度或全宽的情况下,这可以是usefyk,从而改善性能.实际上,似乎使用此值的行为就像px在Chrome中分配了值一样.

这是每个动画的时间轴的几张图片.时间线是使用"性能"下的Google Dev工具获得的.为了更好地显示差异,Chrome开发工具的性能受限于"低端移动"(6倍CPU减速).

使用百分比变换:

使用像素(px)进行变换:

从图像中可以看出,在使用%而不是px确定转换时,似乎有更多的渲染和绘画正在进行.很有意义的是,浏览器必须计算每个帧的百分比值(我猜？),但与使用像素值相比,我感到惊讶的是它需要更多.

另请注意,图片中显示百分比时间轴的帧速率从未达到约60 fps,而是平均约为40 fps.

以下是复制案例的片段.有一个使用百分比,一个使用px.

$(document).on("click", function(){
$(".bb").toggleClass("active");
});

.aa{
  height:50px;
  background:blue;
  position:fixed;
  top:0;
  width:100%;

}
.bb{
  position:fixed;
  top:0px;
  background:none;
  height:100%;
  width:100%;
  left:0;
  transform:translateZ(0);
  overflow:hidden;
    pointer-events:none;
}
.cc{
  height:100%;
    transform:translate3d(0,500px,0);
    width:100%;
      transition:transform .5s ease-in;
      background:red;
}
.bb.active .cc{ …

有什么方法可以使用CSS3淡入和淡出白色背景<div>吗？内容应保持可见,因此背景应该消失.

任何使用css3转换/转换的想法？

谢谢您的帮助.

假设我有一个简单的元素:

<a href="#" id="btn" onclick="return false">Click</a>

现在我可以通过点击改变这个元素的外观:active:

#btn:active {
    background: red;
}

然而,我想要的是,在我点击它之后,元素将保持红色大约一秒钟而不改变HTML(因此没有复选框黑客)或javascript.是否有一个可以滥用的聪明技巧？

JsFiddle在这里

我有一个包含两个类的元素:

<div class="class1 class2"></div>

.class1 {transition: background-color 0.4s;}
.class2 {transition: top 1s;}

问题是转换会class2覆盖转换class1.

我无法使用,.class2 {transition: all 1s}因为转换持续时间必须不同.

我也不想复制代码class1,class2因为class2也可以应用于其他元素.

有没有办法在不覆盖现有元素的情况下向元素添加转换？

::placeholder当我发现奇怪的东西时,我正在使用Codepen(Chrome 59.0.3071)上的伪元素.(请看我的JSFiddle)

简而言之,此CSS不应启用::placeholder2s 以上的颜色转换:

input::placeholder {color:red;transition:2s;}
input:hover::placeholder {color:green}

使用Firefox,有超过上悬停2秒的时间间隔内没有颜色转变(这似乎根据是正确的这一部分是W3C规范的和此部分的不同的一个的-遵循螺纹的::first-line伪元素),而是有是一种立即向绿色的过渡;

但是,使用Chrome的同一个JSFiddle 确实会::placeholder在2秒的时间内显示颜色转换,根据规格,这似乎是不正确的.

这是这个版本的Chrome中的一个错误(如果是这样,是否正在解决？)或者这是对我对CSS缺乏了解的指控？