标签: css-transitions

如何启用-webkit-animation:before和:after伪元素？

您可以在http://jsfiddle.net/4rnsx/中看到它不适用于:before和:after.
在这里,我尝试使用Mootools http://jsfiddle.net/6bzCS/启用此功能.


Mozilla - 将在Firefox 4中支持它https://developer.mozilla.org/en/CSS/-moz-transition-property
W3C - CSS3支持所有元素的transition-property,:before和:after伪元素http:// www.w3.org/TR/css3-transitions/#transition-property


更新:如何启用fadein,fadeout对CSS3工具提示http://css-plus.com/2010/04/create-a-speech-bubble-tooltip-using -css3-and-jquery /和demo？

我有一个列表,当我将鼠标悬停在列表上时,列表中有一个项目转移到东北.使用margin-top和margin-left属性转换工作但是正在盘旋的项目继续推动其他元素,所以我添加position:relative并尝试使用top和left转换属性但它似乎没有工作.

这是jsfiddle:

列表悬停

我正在显示title链接的属性:hover.title属性通过:after...  附加到链接

现在我想知道如何:after在悬停和悬停时为伪元素的不透明度设置动画.

HTML

<a class="link" href="#" title="something"></a>?

CSS

.link {
    display:block;
    width:50px;
    height:50px;
    background:red;
}

.link:after {
    position:relative; 
    content: attr(title); 
    top:55px; 
    color:$blue; 
    zoom: 1; 
    filter: alpha(opacity=00); 
    opacity: 0;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
}

.link:hover:after { 
    zoom: 1; 
    filter: alpha(opacity=100); 
    opacity: 1;
}

查看演示:http://jsfiddle.net/d2KrC/

任何想法为什么这不起作用？

我希望使用CSS和jQuery绘制一个财富之轮.我不想使用任何图像.

此外,我希望在圆圈中至少有8个段,并在每个段中正确对齐每个文本词.这是一张照片来说明:

一旦我有这个工作,我就可以使用CSS3 rotate财产.

不知道怎么能这样做？

有时使用特定文本,使用CSS3进行转换.我不知道它发生的原因,因此我不能在jsfiddle中重新创建它.

但是你可以在这里看第4张幻灯片(5张戒指)

http://jashwant.github.io/kickass-slider/

很酷的文字会留下痕迹,而动画和路径会在一段时间后被删除.但是其他文本没有任何痕迹也没问题.我无法找出问题所在.

我该如何避免这种痕迹？

(我使用的是最新的linux chrome 26.0.1410.63)

ps我正在使用jquery-transit来制作动画.

见图Cool.

更新:

这是更详细的答案

今天早些时候,我问过Overlay背景图像,背景色为rgba.我的目标是使用背景图像的div,当有人悬停div时,背景图像会覆盖rgba颜色.在答案中,:after给出了一个解决方案:

#the-div {
    background-image: url('some-url');
}

#the-div:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

我现在想要有相同的,但有一个CSS过渡:我想要淡入的背景颜色.我尝试添加transition: all 1s;到#the-divCSS,但这不起作用.我也试着将它添加到#the-div:hover和#the-div:after,但也不能工作.

有没有一种纯粹的CSS方法来为带有背景图像的div添加淡入淡出效果？

我查看了本页底部的官方显示/隐藏转换示例... http://docs.angularjs.org/api/ng.directive:ngShow

我试图修改它以从一个div到另一个div获得无缝淡入淡出过渡(过渡:不透明度0.5s缓入),其中两个div占据页面上完全相同的位置,因此一个div完全淡出在另一个div开始淡入之前.

在jquery中,它将如下所示:

$("#divA").fadeOut(function() { $("divB").fadeIn(); });

有没有人对使用角度的最佳方法有任何建议,相对于链接的例子,它使用单个模型"检查"来触发转换？

我的问题是,在CSS转换期间,border-radius如果重叠元素的转换涉及,则暂时停止剪切元素transform.在我的情况下,我有两个divs绝对定位在另一个之上,其中第一个具有由单击第二个内部导航元素的操作触发的转换,如:

<div id="below"></div>
<div id="above"><div id="nav"></div></div>

在上述 div具有border-radius: 50%和剪辑的资产净值 div.在CSS中它就像(最小的例子,原始onclick动作说明:hover):

#below {
    position: absolute; width: 250px; height: 250px;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
#below:hover {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#above {
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    overflow: hidden;
}
#nav {
    width: 40px;
    height: 200px;
    background-color: rgba(0,0,0,0.3);
}

当然,在http://jsfiddle.net/UhAVG/中可以更好地看到它,并带有一些额外的样式以便更好地说明.这在IE10 +和FF25中也可以正常工作,在Chrome 31和32中也可以禁用硬件加速.结果,只有加速的Chrome才会显示此不良行为.所以我想知道是否有可能使用当前的CSS3技术以某种方式解决它.

我正在努力寻找一种方法来使CSS页面转换在谷歌浏览器中表现良好.

在时间轴上的Chrome开发人员工具中,我注意到了一些红色标记,他们都说了同样的事情:长帧时间表示渲染性能差.有关渲染性能的Web Fundamentals指南,请阅读更多内容.

在我正在研究的应用程序上,这似乎是合法的,我试图调查,但找不到来源.

我做了一个更简单的演示,我仍然得到了红色标记:http://codepen.io/anything/full/qOOpza/

.page {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#ccc;
  &--1 {
    background:green;
  }
  &--2 {
    background: yellow;
  }
  &.moveToRight {
        animation: moveToRight ease .5s;
        animation-fill-mode: forwards;
    }

    &.moveToLeft {
        animation: moveToLeft ease .5s;
        animation-fill-mode: forwards;
    }
}


@keyframes moveToRight {
    from { }
    to { transform: translateX(100%); }
}

@keyframes moveToLeft {
    from { }
    to { transform: translateX(0); }
}

我想动画表行的外观和消失.

首先,我尝试使用CSS 转换,但由于display属性的更改,它没有做任何事情.

所以我使用了一个按预期工作的动画.

问题是,动画开始时保留行的整个高度.有关问题的说明,请参阅下面的代码段:在动画开始之前,将行3立即向下推.

如何逐步为行的高度设置动画,以便它只需要所需的空间？

作为奖励:

• 它不应该要求行的固定高度
• 它应该显示为翻译,而不是缩放; 看起来它应该从它上面的行的底部滑动
• 它应该是双向的(当我隐藏它时反之亦然)

$('button').on('click', function() {
  $('tr:nth-child(2)').toggleClass('active');
});

@keyframes anim {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
tr {
  background: #eee;
  border-bottom: 1px solid #ddd;
  display: none;
  transform-origin: top;
}
tr.active {
  display: table-row;
  animation: anim 0.5s ease;
}
td {
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button type="button">Toggle</button>
<table>
  <tbody>
    <tr class="active">
      <td>Row 1</td> …