Tag: css transitions

旋转或旋转hover的图像: 我想知道如何在旋转或旋转图像时进行旋转。我想知道如何在下面的代码中用CSS来模拟这个function： img { border-radius: 50%; } <img src="http://i.imgur.com/3DWAbmN.jpg" />

CSS3animation和显示无: 我有一个CSS 3animation的div在一段时间后滑入。我想要的是几个div来填充幻灯片的空间，然后将这些元素推到页面上。当我第一次尝试这个幻灯片仍然占用空间，即使不可见时。如果我更改div display:none div不滑入。我如何让div在占用时间之前不会占用空间（使用CSS进行计时）。我正在使用Animate.css作为animation。这是代码的样子： <div id="main-div" class="animated fadeInDownBig"><!– Content –></div> <div id="div1"><!– Content –></div> <div id="div2"><!– Content –></div> <div id="div3"><!– Content –></div> 正如代码所示，我希望主要div被隐藏，其他div首先显示。然后我有以下延迟设置： #main-div{ -moz-animation-delay: 3.5s; -webkit-animation-delay: 3.5s; -o-animation-delay: 3.5s; animation-delay: 3.5s; } 正是在这一点上，我希望主要股东推动其他股东下来，因为它进来。我该怎么做呢？注：我已经考虑使用jQuery来做到这一点，但我更喜欢严格使用CSS，因为它更平滑，时序控制得更好一些。编辑我曾经尝试过Duopixel提出的build议，但是我误解了，并没有正确地做，或者它不起作用。这里是代码： HTML <div id="main-div" class="animated fadeInDownBig"><!– Content –></div> CSS #main-image{ […]

hover时创build一个CSS“path”: 我试图用（主要）CSS生成一个'漂亮的'CSS菜单，但也有一些jQuery ：我的总体思路是： +————————+ | | | | | +—+ | | | | | | |___| | <– Hover this center piece | | | | | | +————————+ +————————+ | _ | | |\ | <– All start moving up to top of screen | \ +—+ | | | | | | […]

Chrome中的CSS3转换旋转造成1px的偏移: 我有一个css3转换旋转转换的问题。转换工作正常，但在完成元素移动一个像素之后。另一个奇怪的是，它只发生在页面居中（ margin:0 auto; ）。如果您还删除了转换，该错误仍然存在。你可以看到它发生在这里： http://jsfiddle.net/MfUMd/1/ HTML： <div class="wrap"> <img src="https://github.com/favicon.ico" class="target" alt="img"/> </div> <div class="wrap"> <div class="block"></div> </div> CSS： .wrap { margin:50px auto; width: 100px; } .block { width:30px; height:30px; background:black; } .target,.block { display:block; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; […]

CSS：animation与转换: 所以，我明白如何执行CSS3转换和animation。什么是不明确的，我GOOGLE了，是什么时候使用哪个。例如，如果我想让球弹跳，显然animation就是要走的路。我可以提供关键帧和浏览器将做中间帧，我会有一个很好的animation。但是，有时可以实现上述效果。一个简单而常见的例子就是实现facebook风格的滑动抽屉菜单：这个效果可以通过如下的转换来实现： .sf-page { -webkit-transition: -webkit-transform .2s ease-out; } .sf-page.out { -webkit-transform: translateX(240px); } http://jsfiddle.net/NwEGz/ 或者，通过这样的animation： .sf-page { -webkit-animation-duration: .4s; -webkit-transition-timing-function: ease-out; } .sf-page.in { -webkit-animation-name: sf-slidein; -webkit-transform: translate3d(0, 0, 0); } .sf-page.out { -webkit-animation-name: sf-slideout; -webkit-transform: translateX(240px); } @-webkit-keyframes sf-slideout { from { -webkit-transform: translate3d(0, 0, 0); } to […]

加载css3过渡animation？: 有没有可能使用页面加载CSS3转换animation，而不使用JavaScript？这是我想要的，但在页面加载： http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html 我到目前为止发现的 CSS3转换延迟，一种延迟对元素的影响的方法。只适用于hover。 CSS3的关键帧，负载工作，但速度非常缓慢。没有用，因为这一点。 CSS3过渡足够快，但不要在页面加载时animation。

具有多个属性的CSS过渡速记？: 我似乎无法find具有多个属性的CSS过渡速记正确的语法。这不会做任何事情： .element { -webkit-transition: height .5s, opacity .5s .5s; -moz-transition: height .5s, opacity .5s .5s; -ms-transition: height .5s, opacity .5s .5s; transition: height .5s, opacity .5s .5s; height: 0; opacity: 0; overflow: 0; } .element.show { height: 200px; opacity: 1; } 我用javascript添加了show class。元素变得更高和可见，它只是不转换。在最新的Chrome，FF和Safari中进行testing。我究竟做错了什么？编辑：只是要清楚，我正在寻找速记版本缩放我的CSS。它充满了所有供应商的前缀。还扩展了示例代码。

我如何正常化跨浏览器的CSS3转换function？: Webkit的转换结束事件叫做webkitTransitionEnd，Firefox是transitionEnd，opera是oTransitionEnd。在纯JS中处理所有这些问题的好方法是什么？我应该做浏览器嗅探吗？或分别实施每一个？还有一些没有发生在我身上的方式？即： //doing browser sniffing var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd"; element.addEventListener(transitionend, function(){ //do whatever },false); 要么 //asigning an event listener per browser element.addEventListener(webkitTransitionEnd, function(){callfunction()},false); element.addEventListener(oTransitionEnd, function(){callfunction()},false); element.addEventListener(transitionEnd, function(){callfunction()},false); function callfunction() { //do whatever }