Tag: css transitions

旋转或旋转hover的图像

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

CSS3翻译弧

当前的CSS3是否可以将一个对象(特别是DIV)沿弧线或曲线转换? 这是一个图像来帮助说明。

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 […]

在CSS转换callback

是否有可能得到一个通知(如callback),当CSS过渡已经完成?

加载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 }