css-transitions

I am looking to find an example of how to make a label / placeholder transition move up and out of placeholder position into a label position and vice versa.. Example: https://www.xero.com/us/signup/ General sibling selectors & :focus does the trick in a very simple way ;) input{ position:absolute; top:20px; } input ~ span{ transition:top .7s ease; position:absolute; top:20px; } input:focus ~ span{ top:0px; } <label> <input> <span>Text</span> </label> here is an example with multiple fields https://jsfiddle.net/shLe3107/1/ hope this is enough else just ask I found a good Codepen showing an

Is there a way to continuously animate a background image's background-position property using CSS3 transitions? Yes, it's possible - DEMO div { background: url(http://lorempixel.com/100/100); height: 100px; width: 100px; -webkit-animation: slide 2s linear infinite; -moz-animation: slide 2s linear infinite; animation: slide 2s linear infinite; } @-webkit-keyframes slide { 0% {background-position: 0 0;} 100% {background-position: 100px 0;} }​ @-moz-keyframes slide { 0% {background-position: 0 0;} 100% {background-position: 100px 0;} } @keyframes slide { 0% {background-position: 0 0;} 100%

I'm trying to achieve sliding effect with the new ng-animate feature of Angular. I've taken some code from the demo site and have prepared a fiddle . The problem is that elements below the sliding DIV keeps shifting up and down when the item is being swapped from the array. I tried with line-height but no success. Is it possible to fix the above behavior? or any better way to achieve it only with angular and CSS? You can wrap the input and the button in a div and also put it in the absolute position. Here is a demo HTML <div ng-app=""> <div ng-controller='anim' > <div ng-repeat="item in lst"

From my understanding, one way to work with CSS transitions is to use Ember.run.scheduleOnce('afterRender') However, for me it is not working without adding a timeout. This is in Ember 1.0.0 View = Em.View.extend({ didInsertElement: function() { Ember.run.scheduleOnce('afterRender', this, 'animateModalOpen'); }, animateModalOpen: function() { // this does not work - modal gets styles from class "in" with no transition $('.modal').addClass('in'); // this does work, the transition is fired setTimeout(function() { $('.modal').addClass('in'); }, 1); } }, }); Is this something that used to work and

How can I make my <div> elements grow (and the content changes text size to a higher one), when hovered over? I put them in a class and tried: size: 150%; and height: +30px; width: +30px; the first try didn't work at all, and the second code just made the div's flash and dissappear partially. laymanje CSS3 solution: div { background: #999; width: 200px; height: 20px; transition: width 1s; } div:hover{ width: 300px; } <div> <p>Im content</p> </div> http://jsfiddle.net/MrdvW/ Using CSS you can add a hover style to the div: div.container { width: 80%; background-color: blue; } div.container:hover

I have a cubic bezier curve where the first and last points are given (namely P0(0,0) and P3(1,1)). The other two points are defined like this: cubic-bezier(0.25, 0.1, 0.25, 1.0) (X1, Y1, X2, Y2, also those values must not be smaller or larger than 0 or 1, respectively) Now what would I have to do to get the Y coordinate for a given X, assuming there's only one? (I know that under certain circumstances there can be multiple values, but let's just put them aside. I'm not doing rocket science over here, I just want to be able to get Y multiple times per second to do transitions) I managed to dig

Original Question... updated working code below: I have a loading image which comes up during an ajax load event. The image shows/hides by adding or removing a "loading" class to the body element. Currently, the loading image animates background-size from 0 to 100%, and fades in the opacity (vice versa for the 'return' transition). What I want to accomplish, though, is to have the background-size transition happen instantly (not transition) on the fade out, so: Fade in: opacity from 0 to 1 in .2s, background size from 0 to 100% in .2s Fade out: opacity from 1 to 0 in .2s, background size from