ウェブページの作業のアニメーションを作成するために、どのように私は興味を持って

Question

を以下にリンクに似たWebアプリケーションの動作のアニメーションを作成する方法を知っています話しているのは、このページの「すばらしいデザインに必要なものはすべて」セクションです。アニメーションとアイコンが右側のアニメーションと同期してハイライト表示されます。どのように可能ですか？

ありがとうございます。

Answer 1

私はCSS transitionとopacityのプロパティを使用してこれを実現できると思います。

JavaScriptを使用してHTML要素の位置と不透明度を変更します（例：div）。

アニメーション用のJSライブラリがありますが、自分でそれをステッチすることは良い練習になります！

function toggle() { 
    document.getElementById('div01').style.left = '100px'; 
    document.getElementById('div01').style.opacity = 0; 
} 

がdiv01のtransition場合は「0.1秒、」opacityとpositionは0.1秒に変更されます：私はdiv要素を切り替えるにはWANの場合

例えば、私のような何かを行うことができます。

例のようにdiv要素に他の多くの要素を入れてから、その要素を最上部のdiv要素を隠すことで隠すことができます。

ここはフィドルです：https://jsfiddle.net/yfuLb9d0/2/です。