css-animations

I'm working at a portfolio to show when I apply for my next study. Since we're living in 2012, it has tons of fancy animations and CSS3 junk, just to give them the 'We need this guy' feeling. I'm having a little problem at the moment. This is a small part of a specific element: /* This is the CSS of the elements with the id called 'fadein' */ #fadein { -moz-animation-duration: 2s; -moz-animation-name: item; -moz-animation-delay: 4.5s; -webkit-animation-duration: 5s; -webkit-animation-name: item; -webkit-animation-delay: 4.5s; opacity:0; -webkit-opacity:0; } @-webkit-keyframes item { from {

I try to set up this LESS mixin for CSS animation keyframes: .keyframes(@name, @from, @to) {; @-webkit-keyframes "@name" { from { @from; } to { @to; } } } but there is some problem with name pharse, is there any option to do this corectly? As of LESS >= 1.7 you can use variables for keyframe keywords (names). Some changes have been made in LESS 1.7 to how directives work, which allows to use variables for the name/keyword of @keyframes (so the example from the question should work now). DEMO Unfortunately keyframes names can not be dynamically generated in LESS <= 1.6 Hence, the normal way of

Is there any way to pass one mixin or style's declaration to another mixin as an input parameter? Let's take a look at an example with animation keyframes. Following is how we define keyframes in pure CSS: @-moz-keyframes some-name { from { color: red; } to { color: blue; } } @-webkit-keyframes some-name { from { color: red; } to { color: blue; } } @keyframes some-name { from { color: red; } to { color: blue; } } Idea is to simplify these declarations using mixins, so we can have something like following: .keyframes(name, from, to) { // here we need somehow to reproduce structure // that we

This question already has an answer here: Stopping a CSS3 Animation on last frame 8 answers I write a css3 animation and it is only performed once. The animation works well, but it will reset when the animation finished. How can I avoid this, I want to keep the result instead of reset it. $(function() { $("#fdiv").delay(1000).addClass("go"); }); #fdiv { width: 10px; height: 10px; position: absolute; margin-left: -5px; margin-top: -5px; left: 50%; top: 50%; background-color: red; } .go { -webkit-animation: spinAndZoom 1s 1; } @-webkit-keyframes spinAndZoom { 0% { width: 10px; height: 10px;

I'm making a simple landing page driven by CSS3. To make it look awesome there's an <a> plopping up: @keyframes splash { from { opacity: 0; transform: scale(0, 0); } 50% { opacity: 1; transform: scale(1.1, 1.1); } to { transform: scale(1, 1); } } And to make it even more awesome I added a hover animation: @keyframes hover { from { transform: scale(1, 1); } to { transform: scale(1.1, 1.1); } } But there comes the problem! I assigned the animations like this: a { /* Some basic styling here */ animation: splash 1s normal forwards ease-in-out; } a:hover { animation: hover 1s infinite alternate

I have an element whose visibility is toggled by ng-show . I'm also using CSS animations - the automatic ones from ng-animate - on this element to animate its entry. The element will either contain an image or a video. In the case that the element contains a video, I want to play it, but I don't want to play the video until it's finished animating in. As such, I was wondering if there's an easy way to bind a callback to the end of a CSS animation in AngularJS? The docs reference a doneCallback , but I can't see a way to specify it... One workaround(?) I have thought of is $watch ing element