The power of CSS3 is enormous and in this post I create appearing effect of “Sign In Form” using differn style in each example.
Actually, now transition property of CSS supporting almost in all browsers, just in some case you need to use prefix -webkit, -moz, -ms, -o. You may check it on Can I use…
Awesome and simple CSS3 Transition generator (and not only).
More about transition-timing-funtion with example.
If you look closely you may see that in all example firstly I hide “Sign In Form” with transform: scale, rotate, translateX/Y and add transition. Than I use different value of transform, transition-delay, opacity for show original transition CSS effects.
Example 1
See the Pen CSS3 transition effects example 1 by qetr1ck-op (@qetr1ck-op) on CodePen.
In first example I used transition for base elements with different timestamps and time function. Also I used transform: translateY property that push “Sign In Form” and child elements from current position.
When you click on main section, you can see delay property that emulate animation. In this example I added a transition-delay: ...s which make transition effect start a bit later.
Example 2
See the Pen CSS3 transition effects example 2 by qetr1ck-op (@qetr1ck-op) on CodePen.
In second example I used new div.content, you can see it in HTML mark-up. For “Sign In Form” I applied transform: translate(...px, ...px) rotate(...deg) for children used only translate. Of course added transition for elements.
Translate transformation in order move elements in place. The “Sign In Form” will also be rotated. The each elements of the description will come with a little delay.
Example 3
See the Pen CSS3 transition effects example 3 by qetr1ck-op (@qetr1ck-op) on CodePen.
In third example I used the translate and transforms: rotate to bring up content.
Than I just need to reset transform: translateX(0px) rotate(0deg) and add transition-delay: ...s.
Example 4
Here in four example I performed zoom out for main block and zoom in for “Sign In Form” with rotation effect. All thanks to transform: scale and rotate.
See the Pen CSS3 transition effects example 4 by qetr1ck-op (@qetr1ck-op) on CodePen.
Example 5
In this example I used transform: translateX() and transition timing function ease-in-out. Transition effect make the “Sign In Form” slide from right, with pushing effect for main container.
See the Pen CSS3 transition effects example 5 by qetr1ck-op (@qetr1ck-op) on CodePen.
Example 6
In sixth example I performed that “Sign In Form” comes from the front, zooming out until its original size: transform: scale(from 10 to 1). And inputs will slide from bottom, used transform: translateY.
See the Pen CSS3 transition effects example 6 by qetr1ck-op (@qetr1ck-op) on CodePen.
Example 7
In this seven example the idea is to rotate the image to center and scale it down: transform: rotate(0deg)->(720deg) scale(1)->(0). Then the “Sign In Form” comes from up with description content following. transform: translateY()).
Also Added delay for the “Sign In Form” elements transition-delay: ..s. This will show us the rotating main block first and then the description will come into. In the reverse transition, everything will disappear immediately and image will rotate back.
See the Pen CSS3 transition effects example 7 by qetr1ck-op (@qetr1ck-op) on CodePen.
Example 8
In eighth example I used an animation which recreate a bounce effect. The “Sign In Form” will bounce in from top. animation: bounceY 0.9 linear.
animation: bounceY 0.9 linear
See the Pen CSS3 transition effects example 8 by qetr1ck-op (@qetr1ck-op) on CodePen.