css-animations

I'm currently trying out angular2's animation and I was wondering what specific advantage they bring over standard css animations/transitions. e.g. a typical material designed card and hover effects with the box shadows. Most css frameworks use :hover and css-transitions. Is there a particular advantage in using angular 2 animations? I read somewhere that some css animation properties don't invoke the GPU as much, hence there's somethings delays and lags. What about angular2 animations? The question is actually more javascript animation vs css animation (because angular2's animations are based

Here is the standard CSS I am trying to produce but want to use a SASS Mixin to do the work. STANDARD CSS @-webkit-keyframes crank-up { 100% { -webkit-transform: rotate(360deg);} } @-moz-keyframes crank-up { 100% { -moz-transform: rotate(360deg);} } @-o-keyframes crank-up { 100% { -o-transform: rotate(360deg);} } keyframes crank-up { 100% { transform: rotate(360deg);} } I'm using the same mixin as in the following post SASS keyframes not compiling as wanted which is shown below. MIXIN @mixin keyframes($name) { @-webkit-keyframes #{$name} { @content; } @-moz-keyframes #{$name} { @content; } @

I'm trying to figure out how to do a slide left, right, up, down between two Bootstrap 3 tabs. I have searched the web and surprisingly have not found anything. The closest thing I found was THIS on Bootstrap github. However, it deals with Bootstrap 2.0.2 and no longer works for Bootstrap 3. Does anybody know how to slide left, right, up down (any or all) between two Bootstrap 3 tabs? Here is the basic Bootstrap 3 tab setup that I am using. <ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li>

While working with CSS keyframe animations I found that when I give an element two animations like: .element { animation: animate1 1000ms linear infinite, animate2 3000ms linear infinite; } If both of the animations animate using the transform property only the last one triggers through cascading. But if the @keyframes animations are lets say one margin or display or some other css attribute and the other uses transform then they both trigger. here is a codepen example with the relevant code below. CSS @keyframes move { 0%, 100% { transform: translateX(0px); } 50% { transform: translateX(50px)

I want to create an expand/collapse animation that's powered only by classnames (javascript is used to toggle the classnames). I'm giving one class max-height: 4em; overflow: hidden; and the other max-height: 255em; (I also tried the value none , which didn't animate at all) this to animate: transition: max-height 0.50s ease-in-out; I used CSS transitions to switch between them, but the browser seems to be animating all those extra em 's, so it creates a delay in the collapse effect. Is there a way of doing it (in the same spirit - with css classnames) that doesn't have that side-effect (I can

I'd like to emulate an elastic easing function in CSS3. CSS3 does not support this natively, so I've been coming up with my own keyframes, and it looks okay , but not perfectly natural. I do NOT want a solution that requires any additional JavaScript scripts. All of the other posts on StackOverflow have JS solutions accepted. What's the best way to implement elastic easing in pure CSS3? Here's my work so far, if that helps anybody... https://jsfiddle.net/407rhhnL/1/ I'm animating the red, green, and blue isometric rectangular prisms. I've simulated an elastic easing manually by hardcoding the

I want to animate the appearance and disappearance of table rows. First of all I tried using a CSS transition , but it did nothing due to the change of the display property. So I used an animation , which works as expected. The problem is, the full height of the row is reserved when the animation begins . See the snippet below for an illustration of the problem: Row 3 is pushed down straight away, before the animation begins. How can I animate the height of the row progressively, so that it only takes as much space as needed? And as a bonus: it should not require a fixed height for rows it

I would like to animate things in 3D space. I know this is possible with CSS and HTML5, but I can't find a good tutorial for practical use! I found this website as an example. You can select text etc. All the time. Can somebody give a very easy to understand and little example how this works? I see the source code but I don't really understand it… Is this CSS3 or HTML5 or both? How much JavaScript do I need? Which browsers support this? Its all css3 and javascript. Just inspect the site in your favorite inspector, dig into the dom, and you'll see something like -webkit-perspective: none;