html – css转换：选择不同的速度悬停

概述是否有可能为css中的转换选择不同的时间/速度,因此当鼠标悬停在div上时,它会以不同于其缩回的速度扩展到其原始宽度而不是悬停状态. 我尝试过声明不同的转换速度：hoer和normal状态样式,但是,只有正常的状态样式似乎适用. http://jsfiddle.net/tpf8mv51/3/ 问题： 1)它与它扩展的速度相同. 2)zindex在动画完成后生效,原因是我不接受. 3)其他图像即使不 是否有可能为CSS中的转换选择不同的时间/速度,因此当鼠标悬停在div上时,它会以不同于其缩回的速度扩展到其原始宽度而不是悬停状态.

我尝试过声明不同的转换速度：hoer和normal状态样式,但是,只有正常的状态样式似乎适用.

http://jsfiddle.net/tpf8mv51/3/

问题：

1)它与它扩展的速度相同.

2)zindex在动画完成后生效,原因是我不接受.

3)其他图像即使不应该受到影响,受影响我的意思是他们99％的时间会消失直到动画完成.

* {    margin: 0;    padding: 0;}body {    overflow: hIDden;}.main {    Font-size: 0;    height: 100%;    wIDth: 100%;    display: none;    z-index: -1;    position: absolute;    top: 0;    left: 0;    overflow: hIDden;}.main img {    -webkit-user-select: none;    wIDth: 25%;    -webkit-Transition: transform .5s;    transform-origin: left;    z-index: 0;    vertical-align: top;}.main img:hover {    transform: scale(1.3,1);    z-index: 1;}

@R_301_6120@ 不要担心.试试这个(快速IN,慢速OUT)：

.main img {  wIDth: 25%;  height: 100%;  Transition: wIDth 2s ease;}.main img:hover {  wIDth: 50%;  Transition: wIDth .5s ease;}

你可以看到它的小提琴只有一个过渡.如果您只是更改宽度,请告诉它更改宽度,该宽度具有完全的浏览器支持,而不是使用所有伴随前缀调用transform.

总结

以上是内存溢出为你收集整理的html – css转换：选择不同的速度悬停全部内容，希望文章能够帮你解决html – css转换：选择不同的速度悬停所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。