WebKit的过渡为＆QUOT;顶＆QUOT;和＆QUOT;底部＆QUOT;性能 [英] webkit-transition for "top" and "bottom" properties
本文介绍了WebKit的过渡为＆QUOT;顶＆QUOT;和＆QUOT;底部＆QUOT;性能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使一个CSS动画，其中一个div（使用屏幕上居中的上方的和的底的属性）扩展设置的上方和底的为20px。
这可能吗？当我尝试使其与发生的：
-webkit-过渡属性：顶部，底部;
-webkit-过渡时间：0.5秒;
不进行动画。我做得不对，或者是它不应该具有这些性质的工作？
P.S。我这样做了钛桌面应用程序，所以只有WebKit的事情...
解决方案下面是一个例子code，关于Safari 5的作品：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆gt;页面标题＆LT; /标题＆GT;
＆LT;风格类型=文/ CSS媒体=屏幕＆GT;
＃测试{
背景：＃3F3;
位置：绝对的;
顶部：50像素;
底：50像素;
宽度：200像素;
-webkit-过渡属性：顶部，底部;
-webkit-过渡时间：0.5秒;
}
＃TEST：悬停{
顶：100像素;
底部：100像素;
}
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT; ＆LT; DIV ID =测试＆GT;
＆LT; / DIV＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;I'd like to make a css animation where a div (centered on a screen using top and bottom properties) expands by setting top and bottom to 20px.
Is it possible? When I try to make it happen with:
-webkit-transition-property: top, bottom; -webkit-transition-duration: 0.5s;
animation is not performed. Am I doing something wrong, or is it not supposed to work with these properties?
P.S. I'm doing this for a Titanium desktop application, so only webkit matters...
解决方案Here is a example code that works on safari 5 :
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style type="text/css" media="screen"> #test{ background:#3F3; position: absolute; top:50px; bottom:50px; width:200px; -webkit-transition-property: top, bottom; -webkit-transition-duration: 0.5s; } #test:hover { top:100px; bottom:100px; } </style> </head> <body> <div id="test"> </div> </body> </html>
这篇关于WebKit的过渡为＆QUOT;顶＆QUOT;和＆QUOT;底部＆QUOT;性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
