I recently illustrated how we can achieve complex CSS animations using cubic-bezier() and how to do the same when it comes to CSS transitions. I was able to create complex hover effect without resorting to keyframes. In this article, I will show you how to create even more complex CSS transitions.
This time, let’s use the @property feature. It’s only supported on Chrome-based browsers for now but we can still play with it and demonstrate how it, too, and can be used to build complex animations.
I highly recommend reading my previous article because I will be referring to a few concepts I explained in detail there. Also, please note that the demos in this article are best viewed in Chromium-based browsers while @property support is still limited.
Let’s start with a demo:
Click on the button (more than once) and see the “magic” curve we get. It may look trivial at first glance because we can achieve such effect using some complex keyframes. But the trick is that there is no keyframe in there! That animation is done using only a transition.
Awesome right? And this is only the beginning, so let’s dig in!
The main idea
The trick in the previous example relies on this code:
@property --d1 { syntax: '<number>'; inherits: false; initial-value: 0; } @property --d2 { syntax: '<number>'; inherits: false; initial-value: 0; } .box { top: 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); } .box:hover { --d1: 0.2; --d1: -0.2; }</number></number>
We’re defining two custom properties, --d1 and --d2. Then, we declare the top property on a .box element using the sum of both those properties. Nothing overly complex yet—just calc() applied to two variables.
The two properties are defined as
Notice that we apply a different transition to each variable—more precisely, a different timing-function with the same duration. It’s actually a different sinusoidal curve for both variables which is something I get deep into in my previous article.
From there, the property values change when the .box is hovered, triggering the animation. But why do we get the result we see in the demo?
It’s all about math. We are adding two functions to create a third one. For --d1, we have a function (let’s call it F1); for --d2 , we have another one (let’s call it F2). That means the value of top is F1 + F2.
An example to better illustrate:
The first two transitions illustrate each variable individually. The third one is the sum of them. Imagine that at in each step of the animation we take the value of both variables and we add them together to get each point along the final curve.
Let’s try another example:
This time, we combine two parabolic curve to get a… well, I don’t know its name it but it’s another complex curve!
This trick is not only limited to the parabolic and sinusoidal curve. It can work with any kind of timing function even if the result won’t always be a complex curve.
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 function
The result? The top value goes from 0 to 10 (30-20) with a custom timing function (the sum of ease-in and ease-out).
We are not getting a complex transition in this case—it’s more to illustrate the fact that it’s a generic idea not only limited to cubic-bezier().
I think it’s time for an interactive demo.
All you have to do is to adjust a few variables to build your own complex transition. I know cubic-bezier() may be tricky, so consider using this online curve generator and also refer to my previous article.
Here are some examples I made:
As you can see, we can combine two different timing functions (created using cubic-bezier() ) to create a third one, complex enough to achieve a fancy transition. The combinations (and possibilities) are unlimited!
In that last example, I wanted to demonstrate how adding two opposite functions lead to the logical result of a constant function (no transition). Hence, the flat line.
Let’s add more variables!
You thought we’d stop at only two variables? Certainly not! We can extend the logic to N variables. There is no restriction—we define each one with a timing function and sum them up.
An example with three variables:
In most cases, two variables are plenty to create a fancy curve, but it’s neat to know that the trick can be extended to more variables.
Can we subract, multiply and divide variables?
Of course! We can also extend the same idea to consider more operations. We can add, subtract, multiply, divide—and even perform a complex formula between variables.
Here, we’re multiplying values:
We can also use one variable and multiply it by itself to get a quadratic function!
Let’s add more fun in there by introducing min()/max() to simulate an abs() function:
Notice that in the second box we will never get higher than the center point on the y-axis because top is always a positive value. (I added a margin-top to make the center of box the reference for 0.)
I won’t get into all the math, but you can imagine the possibilities we have to create any kind of timing function. All we have to do is to find the right formula either using one variable or combining multiple variables.
Our initial code can be generalized:
@property --d1 { /* we do the same for d2 .. dn */ syntax: '<number>'; inherits: false; initial-value: i1; /* the initial value can be different for each variable */ } .box { --duration: 1s; /* the same duration 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( ... ); } .box:hover { --d1:f1; --d2:f2; /* .. */ --dn:f3; }</number>
This is pseudo-code to illustrate the logic:
- We use @property to define numeric custom properties, each with an initial value.
- Each variable has its own timing function but the same duration.
- We define an f function that is the formula used between the variables. The function provides a number that we use to multiply the relevant unit. All this runs in calc() applied to the property.
- We update the value of each variable on hover (or toggle, or whatever).
Given this, the property transitions from f(i1,i2,…,in) to f(f1,f2,..,fn) with a custom timing function.
Chaining timing functions
We’ve reached the point where we were able to create a complex timing function by combining basic ones. Let’s try another idea that allow us to have more complex timing function: chaining timing functions together.
The trick is to run the transitions sequentially using the transition-delay property. Let’s look back at the interactive demo and apply a delay to one of the variables:
We are chaining timing functions instead of adding them together for yet another way to create more complex timing functions! Mathematically, it’s still a sum, but since the transitions do not run at the same time, we will be summing a function with a constant, and that simulates the chaining.
Now imagine the case with N variables that we are incrementally delayed. Not only can we create complex transitions this way, but we have enough flexibility to build complex timelines.
Here is a funny hover effect I built using that technique:
You will find no keyframes there. A small action scene is made entirely using one element and a CSS transition.
Here is a realistic pendulum animation using the same idea:
Or, how about a ball that bounces naturally:
Or maybe a ball rolling along a curve:
See that? We just created complex animations without a single keyframe in the code!
That’s a wrap!
I hope you took three key points away from this article and the previous one:
- We can get parabolic and sinusoidal curves using cubic-bezier() that allow us to create complex transitions without keyframes.
- We can create more curves by combining different timing functions using custom properties and calc().
- We can chain the curves using the transition-delay to build a complex timeline.
Thanks to these three features, we have no limits when it comes to creating complex animations.
以上がカスタムプロパティとキュービックベジエ()を使用して複雑なCSS遷移を構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

@keyframesispopularduetoitsversitility andpowerincreatingsmoothcssanimations.keytricksinclude:1)defingsmoothtransitionsbetweenstates、2)AnimatingMultipleProperiessimally、3)3)bendorprefixesforbrows -compativity、4)組み合わせwithjavasfo

csScounterSareSareusedTomageautomaticinginginwebdesigns.1)それらは、コンテンツ、リスト、および積極的なものを使用することができます

特にモバイルデバイスでは、スクロールシャドウを使用することは、Chrisが以前にカバーした微妙なUXです。 Geoffは、アニメーションタイムラインプロパティを使用する新しいアプローチをカバーしました。これがさらに別の方法です。

簡単に復習してみましょう。画像マップはHTML 3.2に戻ります。ここで、最初にサーバー側マップを使用してから、マップとエリア要素を使用して画像上でクリック可能な領域を定義したクライアント側マップをマップしました。

State of Devsの調査は現在、参加に対して開かれており、以前の調査とは異なり、コードを除くすべてをカバーしています:キャリア、職場だけでなく、健康、趣味などもあります。

CSSグリッドは、複雑で応答性の高いWebレイアウトを作成するための強力なツールです。設計を簡素化し、アクセシビリティを向上させ、古い方法よりも多くの制御を提供します。

記事では、レスポンシブデザインにおけるスペースの効率的なアラインメントと分布のためのレイアウト方法であるCSS FlexBoxについて説明します。 FlexBoxの使用量を説明し、CSSグリッドと比較し、ブラウザのサポートを詳細に説明します。

この記事では、ビューポートメタタグ、柔軟なグリッド、流体メディア、メディアクエリ、相対ユニットなど、CSSを使用してレスポンシブWebサイトを作成するための手法について説明します。また、CSSグリッドとフレックスボックスを使用してカバーし、CSSフレームワークを推奨しています


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
