标签: css-transitions

我想显示一个单词(假设慢),有没有办法首先显示'慢'然后通过CSS动画添加几个O在中间,使其从慢到Sloooooow.

我正在使用最新的chrome,因此欢迎任何CSS3/HTML5功能.

考虑以下小提琴

p {
  -webkit-transform: translate(-100%, 0);
     -moz-transform: translate(-100%, 0);
      -ms-transform: translate(-100%, 0);
       -o-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  -webkit-transition: transform 1s ease-in;
     -moz-transition: transform 1s ease-in;
       -o-transition: transform 1s ease-in;
          transition: transform 1s ease-in;
}

a:hover + p {
  -webkit-transform: translate(0, 0);
     -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}

转换在FF中顺利进行,但在Safari或Chrome(在我的Mac上)根本没有转换.

转换属性是否加上前缀或我的代码中是否存在某种语法错误？

目前,我通过在悬停时更改其背景颜色和字体颜色来设置文本框样式:

transition: background-color 1s, color 1s;

我现在想通过使用transition-delay来改变背景颜色之后的颜色.问题是过渡延迟不会采取我想延迟的属性(即颜色).有没有办法只延迟特定的属性？

是否可以使用CSS过渡来为位置设置之间的某些内容设置动画left: 0px,right: 0px以便它一直在屏幕上显示？我需要从上到下完成同样的事情.我是不是计算了屏幕宽度/对象大小？

#nav {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
    -webkit-transition: all 0.5s ease-out;
}

.moveto {
    top: 0px;
    right: 0px;
}

然后我使用jQuery .addClass

当我从flexbox中移除一个项目时,其余项目会立即"捕捉"到新位置而不是动画.

从概念上讲,由于项目正在改变其位置,我希望过渡适用.

我在所有涉及的元素(flexbox和子元素)上设置了过渡属性

有没有办法为Flexbox编辑(添加和删除)动画？这对我来说实际上是一个showstopper,而且是flexbox的一个缺失部分.

我想创建一个仅由类名驱动的扩展/折叠动画(javascript用于切换类名).

我正在上课 max-height: 4em; overflow: hidden;

和另一个max-height: 255em;(我也尝试了价值none,根本没有动画)

这个动画: transition: max-height 0.50s ease-in-out;

我使用CSS过渡在它们之间切换,但是浏览器似乎在动画所有这些额外em的动画,因此它会在崩溃效果中产生延迟.

是否有一种方法(具有相同的精神 - 使用css类名)没有副作用(我可以放置较低的像素数,但这显然有缺点,因为它可能会切断合法的文本 - 这是价值很大的原因,所以它不会切断合法的长篇文章,只会是荒谬的长篇文章)

查看jsFiddle - http://jsfiddle.net/wCzHV/1/(单击文本容器)

通过使用以下css将其类更改为.elementToFadeInAndOut,我可以创建一个不透明度为零的元素:

.elementToFadeInAndOut {
    opacity: 1;
    transition: opacity 2s linear;
}

有没有办法通过编辑同一个类的css,使元素淡入后淡出？

非常感谢您的宝贵时间.

我正在使用CSS3悬停和过渡来显示和隐藏图像.在移动设备上,我想对触摸事件使用相同的过渡.

基本上,第一次触摸将执行悬停效果或翻转,并且触摸将执行滚动.

我想远离使用JavaScript来做到这一点.如果有办法用纯CSS3做这将是最好的选择.

我正在尝试动画CSS过滤器,但无法找到有关正确过渡属性的任何信息.这些是什么？

这是一个例子:http://jsbin.com/onijim/3/

我想要一种仅使用CSS过渡的方法,以有效地(并且有吸引力地)在悬停时隐藏/显示内容.

需要注意的是,我希望保持动态(自动)高度.

似乎最佳路由是在a fixed height:0到a 之间转换height:auto,但是这还不是浏览器中的转换所支持的.

回应评论的澄清 ::这不是一个等待所有生活浏览器兼容CSS3的问题,而是解决CSS3本身的缺点(例如缺少height:0> height:auto)

我已经探索了其他一些方法,可以在下面的小提琴中查看(并在下面详细说明),但它们都不能满足我,我喜欢其他方法的反馈/提示.

http://jsfiddle.net/leifparker/PWbXp/1/

基本CSS

.content{
    -webkit-transition:all 0.5s ease-in-out;  
    -moz-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
    overflow:hidden;
}

.content { max-height:0px; }
.activator:hover +.content{ max-height:2000px; }

缺点

一个.您需要随意设置一个较高的最大高度,这个动态内容可能会切断信息.

湾 如果作为(a)的预防措施,你需要设置一个非常高的最大高度,动画的延迟就会变得笨拙而且站不住脚,因为浏览器会无形地转换整个距离.也使缓和​​视觉效果降低.

.content { padding:0px; height:0px; opacity:0; }
.activator:hover +.content { padding:10px 0px; height:auto; opacity:1; }

缺点

一个.这很刺耳.它绝对比仅仅突然出现内容稍微好一些,并且通过转换不透明度来进一步销售效果,但总体而言,它不是那种视觉上的光滑.

.content { width:0%; …