Construct Complicated CSS Transitions utilizing Customized Properties and cubic-bezier()

No Comments

I not too long ago illustrated how we are able to obtain complicated CSS animations utilizing cubic-bezier() and how one can do the identical in relation to CSS transitions. I used to be capable of create complicated hover impact with out resorting to keyframes. On this article, I’ll present you how one can create even extra complicated CSS transitions.

This time, let’s use the @property characteristic. It’s solely supported on Chrome-based browsers for now however we are able to nonetheless play with it and exhibit the way it, too, and can be utilized to construct complicated animations.

I extremely advocate studying my earlier article as a result of I will probably be referring to some ideas I defined intimately there. Additionally, please notice that the demos on this article are greatest seen in Chromium-based browsers whereas @property assist continues to be restricted.

Let’s begin with a demo:

CodePen Embed Fallback

Click on on the button (greater than as soon as) and see the “magic” curve we get. It could look trivial at first look as a result of we are able to obtain such impact utilizing some complicated keyframes. However the trick is that there is no such thing as a keyframe in there! That animation is completed utilizing solely a transition.

Superior proper? And that is solely the start, so let’s dig in!

The primary thought

The trick within the earlier instance depends on this code:

@property –d1 {
syntax: ‘<quantity>’;
inherits: false;
initial-value: 0;
}
@property –d2 {
syntax: ‘<quantity>’;
inherits: false;
initial-value: 0;
}

.field {
prime: calc((var(–d1) + var(–d2)) * 1%);
transition:
–d1 1s cubic-bezier(0.7, 1200, 0.3, -1200),
–d2 1s cubic-bezier(0.5, 1200, 0.5, -1200);
}
.field:hover {
–d1: 0.2;
–d1: -0.2;
}

We’re defining two customized properties, –d1 and –d2. Then, we declare the highest property on a .field aspect utilizing the sum of each these properties. Nothing overly complicated but—simply calc() utilized to 2 variables.

The 2 properties are outlined as <quantity> and I multiply these values by 1% to transform them right into a share. We might outline these as <share> immediately to keep away from the multiplication. However I’ve chosen numbers as an alternative in favor of extra flexibility for extra complicated operations later.

Discover that we apply a distinct transition to every variable—extra exactly, a distinct timing-function with the identical period. It’s really a distinct sinusoidal curve for each variables which is one thing I get deep into in my earlier article.

From there, the property values change when the .field is hovered, triggering the animation. However why can we get the consequence we see within the demo?

It’s all about math. We’re including two capabilities to create a 3rd one. For –d1, we’ve a operate (let’s name it F1); for –d2 , we’ve one other one (let’s name it F2). Which means the worth of prime is F1 + F2.

An instance to higher illustrate:

CodePen Embed Fallback

The primary two transitions illustrate every variable individually. The third one is the sum of them. Think about that at in every step of the animation we take the worth of each variables and we add them collectively to get every level alongside the ultimate curve.

Let’s attempt one other instance:

CodePen Embed Fallback

This time, we mix two parabolic curve to get a… effectively, I don’t know its title it however it’s one other complicated curve!

This trick shouldn’t be solely restricted to the parabolic and sinusoidal curve. It may possibly work with any sort of timing operate even when the consequence received’t all the time be a fancy curve.

CodePen Embed Fallback

This time:

–d1 goes from 0 to 30 with an ease-in timing function–d2 goes from 0 to -20 with an ease-out timing operate

The consequence? The highest worth goes from 0 to 10 (30-20) with a customized timing operate (the sum of ease-in and ease-out).

We aren’t getting a fancy transition on this case—it’s extra for example the truth that it’s a generic thought not solely restricted to cubic-bezier().

I feel it’s time for an interactive demo.

CodePen Embed Fallback

All you must do is to regulate just a few variables to construct your individual complicated transition. I do know cubic-bezier() could also be difficult, so contemplate utilizing this on-line curve generator and in addition consult with my earlier article.

Listed below are some examples I made:

As you may see, we are able to mix two completely different timing capabilities (created utilizing cubic-bezier() ) to create a 3rd one, complicated sufficient to realize a elaborate transition. The combos (and prospects) are limitless!

In that final instance, I needed to exhibit how including two reverse capabilities result in the logical results of a relentless operate (no transition). Therefore, the flat line.

Let’s add extra variables!

You thought we’d cease at solely two variables? Definitely not! We will lengthen the logic to N variables. There isn’t a restriction—we outline every one with a timing operate and sum them up.

An instance with three variables:

CodePen Embed Fallback

Generally, two variables are loads to create a elaborate curve, however it’s neat to know that the trick may be prolonged to extra variables.

Can we subract, multiply and divide variables?

In fact! We will additionally lengthen the identical thought to think about extra operations. We will add, subtract, multiply, divide—and even carry out a fancy components between variables.

Right here, we’re multiplying values:

CodePen Embed Fallback

We will additionally use one variable and multiply it by itself to get a quadratic operate!

CodePen Embed Fallback

Let’s add extra enjoyable in there by introducing min()/max() to simulate an abs() operate:

CodePen Embed Fallback

Discover that within the second field we are going to by no means get larger than the middle level on the y-axis as a result of prime is all the time a optimistic worth. (I added a margin-top to make the middle of field the reference for 0.)

I received’t get into all the mathematics, however you may think about the chances we’ve to create any sort of timing operate. All we’ve to do is to search out the precise components both utilizing one variable or combining a number of variables.

Our preliminary code may be generalized:

@property –d1 { /* we do the identical for d2 .. dn */
syntax: ‘<quantity>’;
inherits: false;
initial-value: i1; /* the preliminary worth may be completely different for every variable */
}

.field {
–duration: 1s; /* the identical period for all */
property: calc(f(var(–d1),var(–d2), .. ,var(–dn))*[1UNIT]);
transition:
–d1 var(–duration) cubic-bezier( … ),
–d2 var(–duration) cubic-bezier( … ),
/* .. */
–dn var(–duration) cubic-bezier( … );
}
.field:hover {
–d1:f1;
–d2:f2;
/* .. */
–dn:f3;
}

That is pseudo-code for example the logic:

We use @property to outline numeric customized properties, every with an preliminary worth.Every variable has its personal timing operate however the identical period.We outline an f operate that’s the components used between the variables. The operate supplies a quantity that we use to multiply the related unit. All this runs in calc() utilized to the property.We replace the worth of every variable on hover (or toggle, or no matter).

Given this, the property transitions from f(i1,i2,…,in) to f(f1,f2,..,fn) with a customized timing operate.

Chaining timing capabilities

We’ve reached the purpose the place we have been capable of create a fancy timing operate by combining primary ones. Let’s attempt one other concept that permit us to have extra complicated timing operate: chaining timing capabilities collectively.

The trick is to run the transitions sequentially utilizing the transition-delay property. Let’s look again on the interactive demo and apply a delay to one of many variables:

CodePen Embed Fallback

We’re chaining timing capabilities as an alternative of including them collectively for but another approach to create extra complicated timing capabilities! Mathematically, it’s nonetheless a sum, however because the transitions don’t run on the identical time, we will probably be summing a operate with a relentless, and that simulates the chaining.

Now think about the case with N variables that we’re incrementally delayed. Not solely can we create complicated transitions this fashion, however we’ve sufficient flexibility to construct complicated timelines.

Here’s a humorous hover impact I constructed utilizing that approach:

CodePen Embed Fallback

You’ll find no keyframes there. A small motion scene is made completely utilizing one aspect and a CSS transition.

Here’s a lifelike pendulum animation utilizing the identical thought:

CodePen Embed Fallback

Or, how a few ball that bounces naturally:

CodePen Embed Fallback

Or perhaps a ball rolling alongside a curve:

CodePen Embed Fallback

See that? We simply created complicated animations with no single keyframe within the code!

That’s a wrap!

I hope you took three key factors away from this text and the earlier one:

We will get parabolic and sinusoidal curves utilizing cubic-bezier() that permit us to create complicated transitions with out keyframes.We will create extra curves by combining completely different timing capabilities utilizing customized properties and calc().We will chain the curves utilizing the transition-delay to construct a fancy timeline.

Thanks to those three options, we’ve no limits in relation to creating complicated animations.

CodePen Embed Fallback

The publish Construct Complicated CSS Transitions utilizing Customized Properties and cubic-bezier() appeared first on CSS-Tips. You may assist CSS-Tips by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment