CODEWITHSUNDEEP
css
user2831652
user2831652

Reputation: 1

How to make this transition more smooth?

There's a theme on tumblr called Optica (http://safe.txmblr.com/theme/preview/37310), and I've been trying to make something similar to the post footer on my theme. I've been able to make this code so far: http://jsfiddle.net/zXAeu/ But the transition doesn't seem as smooth as the other one. What am I missing?

#info
    {margin-top:-40px;
    opacity:1;
    z-index:0;
    -webkit-transition: opacity 0.35s cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 0.35s cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -ms-transition: all 0.35s cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 0.35s cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: opacity 0.35s cubic-bezier(0.860, 0.000, 0.070, 1.000);}

Upvotes: 0

Views: 663

Answers (1)

Pixeladed
Pixeladed

Reputation: 1801

Try extend the duration of the transition and use "usual" css code to recreate the cubic bezier effect or you can just use something like this:

-webkit-transition: all 1s cubic-bezier(.42, 0, 1, 1); 
-moz-transition: all 1s cubic-bezier(.42, 0, 1, 1);

If you really need something: http://www.roblaplaca.com/examples/bezierBuilder/

Upvotes: 1

Related Questions