css-transitions

I'm building a progress bar control, and I'm working on the case where it doesn't actually show progress, but just spinning indicator of "something is happening". The design I have for it is basically alternating diagonal stripes, essentially a barber pole kinda like this, but "spinning": With the hopes of offloading as much as I can to the rendering engine, I want to use CSS transitions for this. Supporting old browsers is not a concern for me. So, my first idea was to basically do this: .barber-pole { background-image: url(repeating-slice.png); /* set a very long (one hour!) transition on

As far as I can remember, I didn't have any problems with the CSS3 transitions working for me, until now. Suddenly (possibly because of a chrome update or other modifications to my code) it has just stopped working in chrome (32.0.1700.77), but still works in all other browsers (and an older version of chrome). @media screen and (max-width: 1325px) { .row-offcanvas { position: absolute; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; width: 100%; } button.toggle { display: inline-block; } .row-offcanvas-left, .sidebar-offcanvas {

I have a hidden div #about. By clicking the link #clickme the div gets unhidden by a function. Unfortunately the CSS transition (opacity) is not working though it should keep both classes .hide and .unhide including the transitions. Any ideas? HTML <li><a id="clickme" href="javascript:unhide('about');">click me</a></li> <div id="about" class="hide"> <p>lorem ipsum …</p> </div> CSS .hide { display: none; -webkit-transition: opacity 3s; -moz-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s; opacity:0; } .unhide { display: inline; opacity:1; } SCRIPT <script> function

I making a slider for both modern browsers and old browsers too. I use translate3d and transition to make animation in modern browsers which support css3. I use 2d top, left and easing functions for old browser. I use css3 easing from here: http://matthewlein.com/ceaser/ I want to convert it to javascript function for using on old browser. I know there are many easing function out there, but I just want to know how to convert. Is it possible? You can use the jQuery Bez plugin for Cubic Bezier Easings in jQuery: Demo: http://jsfiddle.net/SO_AMK/sbZ7a/ jQuery: $("#box").click(function() { $(this

I have a hover effect that when it is triggered, the box enlarges. Only issue i have is that the text seems to blur during the transition and then goes sharp again when 'transformed'. Before posting on here i decided to have a research and came across this post which seems to be the issue with mine as well: How to force re-render after a WebKit 3D transform in Safari http://duopixel.com/stack/scale.html I have applied their answer to my build and still the blurred effect happens. I have provided a link below and if anyone could advise me with what i have is possible to resolve that would be

Does WebKit use OpenGL to render CSS transitions, or does it use software rendering? masebase WebKit is just a frontend. It depends on the backend and the hardware support. Google Chrome uses skia as a back-end and it can use software or hardware. So the answer is it depends on the implementation of the back-end and the hardware it is running on. From what I know the only hardware accelerated property using transitions is the translate3d transform . Eg: // Normal div{ -webkit-transition: all 0.5s ease-out; } // Adding class to animate div.transformed{ -webkit-transform: translate3d(100px,

I've built these circles that expand a border when there is a mouseover. The only problem I'm getting now is some times the circle will jitter/shake. And it becomes more apparent when I set the transition: all .1s ease-in-out; to more than .2s. Is there a work around to this problem or is that just the way it is? Here's the code in JsFiddle Thanks for any and all help! EDIT : I am transitioning the dimensions (width and height) of the circles to maintain centering. I realize this is causing the jittering during the transition. Is there a work around? I got rid of the percent values for top

When analyzing jQuery mouse events on different CSS Animation types, I'm noticing that translate3d causes hover and other events to not fire correctly. In a basic example, I am animating a list of blocks from right to left. On rollover, I am setting the hovered LI background to GREEN. note: tests are built for webkit HTML <div class="container"> <ul> <li>content</li> <li>content</li> ... </ul> </div> CSS .container{ position: absolute; left: 600px; top: 0; } .container ul{ list-style: none; width: 9999px; } .container ul li{ width: 200px; height: 400px; float: left; background: red; margin:

I want to set several transform options for my html object but with different duration and delay. If i try to use something like that: -webkit-transition: -webkit-transform, opacity; -webkit-transform: rotate(180deg) scale(2); -webkit-transition-duration: 2000ms, 6000ms; -webkit-transition-delay: 0ms, 6000ms; Then i will have different time function for transform and opacity but can i set different options for rotate and scale, e.g. rotate for 10s and scale 20s? Probably not directly, but the same effect can be achieved by nesting elements . Michael Mullany Yes you can do this directly with

At my personal website , I'm using the CSS3 Transition property on the top nav to animate the margins and padding of an element with a border, to make the border swell on hover. Relevant markup: <nav> <a class="email" href="mailto:notmyrealemailaddress"> <div class="icon-border"> <img src="images/mail_icon.png" width="14" height="12"> </div>Email Me</a> <a class="phone" href="tel:4075555555"> <div class="icon-border"> <img src="images/phone_icon.png" width="11" height="18"> </div>Call Me</a> <a class="behance" href="http://behance.net/dannymcgee" target="_blank"> <div class="icon-border"> <img