css-animations

I'm trying to do a pure HTML/CSS countdown animation but I'm struggling to make it work smoothly. For now I'm only covering minutes and seconds. Notice that I'm using animation-delay property for resetting my countdown to a certain initial time. For now everything is working fine, except the digit corresponding to the x10 minutes which is not changing sync with the rest of the digits. Following I will paste my code and two codepens, a first normal version with the correct timings for a normal behaviour and another one 10 times faster so you can quickly appreciate the problem. https://codepen

How can i make the spinning circles which is on the following site http://www.awwwards.com/ For my site i don't need it to be dynamic. At least not this time. I have tried out different solutions, with both Javascript and CSS, but i'm not sure what is the best method to create this. -moz-transform: rotate(270); -webkit-transform: rotate(270); -o-transform:rotate(270deg); transform: rotate(270deg); transition: all 2s; This is pretty much all i know about transitions, but i guess its enough. However, i would have to have my "pie" of the cake cut out before the transition start, right? Anyone

On the Mac OS X 10.8 "password" screen, if you enter an invalid password, it will "shake" back and forth (a.k.a. left and right). I am trying to achieve an similar effect for an HTML password input field using CSS animations. I created a "Password Shake" jsfiddle that seems to emulate this behavior. However, it doesn't seem quite right. I'm not sure the explicit keyframes and the linear timing function are the right approach. This is my first attempt at a CSS animation, and I'm looking for feedback on the right way to achieve this. HTML <div class="box"> <input type="password" id="demo

I'm building an iPad app using PhoneGap. I'm trying to use CSS transformations for the animation, but I'm not entirely sure I'm using the proper methods to leverage any hardware acceleration the device might support. It's a modal window (DIV) that I want to slide down from the top of the page. It'd start positioned off the top of the screen, then animated into the page itself via adding a class via jquery: .modal { background: url('../images/bgnd-modal.png'); width: 800px; height: 568px; position: absolute; top: -618px; left: 100px; z-index: 1001; -webkit-transition: top .25s ease-in; } .modal

What is the best way to have an object scale and then perform a bounce animation at that scale factor before going back to the original scale factor. I realize I could do something like scaling it to 2.2, then 1.8, then 2.0, but I'm looking for a way where you just have to perform the bounce animation on the scale factor because my scale factor will change. Here is my example. Basically I want to combine the two to work like I said but as you can see the bounce animation performs based off the image size prior to scaling. I need all sides of the image to bounce equally, like the example.