1. CSS3アニメーション機能
CSS3が登場する前は、JavaScriptが要素のスタイル属性を動的に変更してアニメーションを完成させていましたが、この方法ではアニメーションを実現できますが、パフォーマンスにいくつかの問題があります。CSS3の登場により、アニメーションが簡単になり、パフォーマンスが向上しました。
CSS3の「transition」プロパティは、特定の期間内の要素の変更を設定することにより、いくつかの単純なアニメーション効果を実現し、特定の効果をより合理的かつスムーズにします。CSS3の「アニメーション」プロパティを使用すると、FlashまたはJavaScriptスクリプトコードを使用せずに、より複雑なスタイルの変更やインタラクティブな効果を実現できます。遷移とアニメーションの出現により、CSSはWebフロントエンド開発での単純な静的コンテンツの表示に限定されなくなりました。静的から動的への変更を実現するために、単純なメソッドを介してページ要素を移動します。
第二に、CSS3の利点
1.開発とメンテナンスのコストを削減
CSS3が登場する前は、角の丸い効果を実現するために、開発者は1つまたは複数の画像を使用して追加のHTMLタグを追加する必要がありましたが、CSS3を使用すると、CSS3のborder-radiusプロパティを使用してタグのみが必要になります。このようにして、CSS3テクノロジーは、写真を描画、切り取り、最適化する作業から人々を解放することができます。丸みを帯びた角の半径または丸みを帯びた角の色を後でCSS2.1を使用して調整する必要がある場合は、最初から描画して画像をカットする必要があります。CSS3では、border-radiusプロパティの値を変更するだけですばやく変更できます。
CSS3が提供するアニメーション機能を使用すると、開発者は動的ボタンや動的ナビゲーションを実装するときにJavaScriptから離れることができるため、開発者がスクリプトを記述したり、動的なWebサイト効果に適応するための適切なスクリプトプラグインを探したりするのに多くの時間を費やす必要がなくなります。
2.ページのパフォーマンスを改善する
多くのCSS3テクノロジーは、同じ視覚効果を提供することで画像の「代替案」になります。つまり、Webを開発する場合、追加のタグのネストの数と使用する画像の数を減らすと、ユーザーがダウンロードしたいコンテンツが多くなります。少ないほど、ページの読み込みが速くなります。さらに、画像、スクリプト、およびFlashファイルの数が少ないと、ユーザーがWebサイトにアクセスするときのHTTPリクエストの数を減らすことができます。これは、ページの読み込み速度を上げるための最良の方法の1つです。CSS3を使用してグラフィカルなWebサイトを作成する場合、画像は必要ありません。これにより、HTTP要求の数が大幅に削減され、ページの読み込み速度が向上します。たとえば、CSS3アニメーション効果はJavaScriptおよびFlashファイルへのHTTPリクエストを減らすことができますが、ブラウザーがこのアニメーション効果のレンダリングを完了するために多くの作業を実行する必要があり、ブラウザーの応答が遅くなり、ユーザーがチャーンする可能性があります。したがって、複雑な特殊効果を使用する場合は、明確に考慮する必要があります。実際、多くのCSS3テクノロジーは、どのような状況でもページのパフォーマンスを大幅に向上させることができます[52]。
CSS3は完全に下位互換性があるため、機能を維持するためにデザインを変更する必要はありません。WebブラウザーはCSS2も引き続きサポートします。
3.例
インスタンスの入り口：3D動物
CSS样式结构
:root{
height: 100%; // DOM根节点 html高度
}
body{
height: 100%;
margin: 0;
perspective: 2000px; // 规定 3D 元素的透视效果（景深）
perspective-origin: center 100px; // 规定 3D 元素的底部位置
transform-style: preserve-3d; // 所有子元素在3D空间中呈现
}
.father{
width: 300px;
height: 300px;
position: absolute;
top: calc(50% - 150px); // father 页面垂直居中
left: calc(50% - 150px); // father 页面水平居中
transform-style: preserve-3d; // 规定被嵌套元素如何在 3D 空间中显示
transform-origin: 0 0; // 允许你改变被转换元素的位置（定义父容器坐标原点）
/**
* @ Animationl 动画
* 属性：animation-*
* 属性值：value
* animation-name：Name; 动画对象名
* animation-duration：Time; 动画时长
* animation-timing-function：Linear; 动画切换方式
* animation-delay：Time; 延迟执行时间
* animation-iteration-count：Inf; 循环方式 次数/无限循环
* animation-direction：Normal; 首尾间运行方式 交替/反向
*
* @ animation 简写方式
* animation: name duration timing-function delay iteration-count direction;
*/
animation: Run 6s linear infinite alternate;
}
.contain{
width: 300px;
height: 300px;
position: absolute;
background-size: cover;
border-radius: 10px; // 圆角
opacity: .5; // 透明度
}
/**
* @ Transform 向元素应用 2D 或 3D 转换
* 旋转：rotateX(angle) 定义沿 X 轴的 3D 旋转。
* rotateY(angle) 定义沿 Y 轴的 3D 旋转。
* rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
* 缩放：scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值
* scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值
* scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值
* 平移：translateX(x) 定义 3D 转化，仅使用用于 X 轴的值
* translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值
* translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值
*/
.contain:nth-of-type(1){
background-image: url(img/scene1.png);
transform: rotateY(0deg) translateZ(150px);
}
.contain:nth-of-type(2){
background-image: url(img/scene3.png);
transform: rotateY(90deg) translateZ(150px);
}
.contain:nth-of-type(3){
background-image: url(img/scene1.png);
transform: rotateY(180deg) translateZ(150px);
}
.contain:nth-of-type(4){
background-image: url(img/scene3.png);
transform: rotateY(270deg) translateZ(150px);
}
.contain:nth-of-type(5){
background-image: url(img/scene4.png);
transform: rotateX(90deg) rotateZ(180deg) translateZ(150px);
}
.contain:nth-of-type(6){
background-image: url(img/scene4.png);
transform: rotateX(270deg) translateZ(150px);
}
/**
* @keyframes 创建动画，把它绑定到一个选择器
* 规定变化发生的时间：
* 1. 用关键词 "from" 和 "to"，"from"是动画的开始，"to" 是动画的完成
* 2. 0% 是动画的开始，100% 是动画的完成。
* 为了得到最佳的浏览器支持，推荐使用 0% —— 100% 选择器
*/
@keyframes Run{
0%{
transform: rotateY(0deg) rotateX(180deg);
}
50%{
transform: rotateY(180deg) rotateX(360deg);
}
100%{
transform: rotateY(360deg) rotateX(0deg);
}
}
html 主体
<div class="father"> // 父容器 father
<div class="contain"></div> // 立方体各面 contain
<div class="contain"></div>
<div class="contain"></div>
<div class="contain"></div>
<div class="contain"></div>
<div class="contain"></div>
</div>
~~~~~~~~~~~~~~~~ END ~~~~~~~~~~~~~~~~
