学習のポイント
- 変形は、2D変換します
- トランジショントランジション
- アニメーションアニメーション
Webページでのアニメーション
伝統的な方法
- ダイナミックフォト：典型的なのGIFマップパン
- フラッシュ：フラッシュは、プラグインのサポート、大容量ファイルのサイズが必要。（IE +フラッシュプレイヤー）
- JavaScriptを：豊富なアニメーション効果を達成することができます。
CSSの道
- CSS3の変形
- CSS3トランジション
- CSS3アニメーション
変形を変換します
定義
- CSS3の変更は効果のコレクションです：そのよう平行移動、回転、ズーム、チルト効果として
- 各効果は、スケーリング、スキューイング、および他の変更を、翻訳の各要素が発生する制御回転することができる、（変換）変性と呼ぶことができます。
構文
変換：[変換機能] *;
変換機能を：機能設定変更があってもよいし、複数、別の中間スペースであってもよいです。
モーフィング機能
ブラウザのサポート
- 2D変形IE 9を使用する場合、-ms-必要がIE 10の後に、標準バージョンの開始を支援するために、接頭辞を追加します。
- あなたは接頭辞-moz-を追加する必要がFirefoxの15.0バージョンのFirefox 3.5では、Firefoxの16の将来のバージョンで標準をサポートするようになりました。
- クロム4.0をサポート2D変形開始は、我々は実際の使用-webkit-にプレフィックスを追加する必要があります。
- オペラ10.5は、接頭辞-O-追加を開始します。
- サファリ3.1をサポート2D変形開始、我々は実際の使用で-webkit-プレフィックスを追加する必要があります。
- 参考サイト：http://www.caniuse.com
- 参照コードのプレフィックスを追加
DIV {
変換：回転（7deg）を、
-ms-変換：回転（7deg）。/ * IE 9 * /
-webkit-変換：回転（7deg）。/ * Safariとクローム* /
}
2D変位
1、文法
（TX、TY）を変換。
TX：X軸（横軸）移動ベクトル長
TY：Y軸（横軸）移動ベクトル長
2、サンプルコード
<ヘッドLANG = "EN">
<メタ文字コード= "UTF-8">
<タイトル>翻訳的使用</ TITLE>
<スタイル>
李{
リストスタイル：なし。
フロート：左;
幅：80px;
行の高さ：40ピクセル;
背景：RGBA（242、123、5、0.61）。
国境半径：計6Px。
フォントサイズ：16pxに;
margin-left：3px;
}
のLi A {
テキスト装飾：なし。
色：#FFF;
表示ブロック;
テキスト整列：センター;
高さ：40ピクセル;
}
のLi A：
背景：RGBA（242、88 ,. 6、0.87）;
ボーダーRADIUS：計6Px;
/ *移動要素4PXを設定し、8px * /マウスを右下に移動
変換（4PX、8px）翻訳;
-webkit-変換（4PX、8px）翻訳;
-O-変換：（4PX、8px）翻訳;
-moz-変換：（4PX、8px）翻訳;
/ *変換：移動X（4PX）移動Y、（8px）; * /
}
</スタイル>
</ HEAD>
<BODY>
<UL>
<LI> <a href="#">衣類市</a>に</ LI>
<LI> <a href="#">美容室</ A > </ LI>
<LI> <a href="#">スーパーマーケット</a>の</ LI>
<LI> <a href="#">全球购する</a>ます。</ li>
<LI> <a href="#">闪购する</a>ます。</ li>
<LI> <a href="#">团购する</a>ます。</ li>
<LI> <a href="#">拍卖する</a>ます。</ li>
<LI> <A HREF = "＃" >金融</a>の</ LI>
</ UL>
</ BODY>
3方向の変位
- 移動X（TX）は：単純にX軸変位を設定します
変換：変換（100ピクセル、0）変換と等価です：移動X（100ピクセル）
- 移動Y（TY）は：単純にY軸変位を設定します
変換：変換（0,100px）変換に相当します。移動Y（100pxに）
2Dズーム
1、文法
スケール（SX）。
SX：スケーリング座標横（幅）方向の量
SY：スケーリング座標縦方向（高さ方向）の量
2.パラメータ説明
スケール（）関数は一つの値だけを受け取ることができ、二つの値は、一つの値だけ、第二の値とデフォルトに等しい値を受信することができます。
- scaleXプロパティ（SX）は：単純にX軸スケールを設定します。変換：スケール（2,0）==変換：scaleXプロパティ（2）
- scaleYの（SY）は：単純にY軸スケールを設定します。変換：スケール（0,2）==変換：scaleYの（2）
図3に示すように、サンプルコード
コードと2次元コードの他の例変位
李：ホバー{
背景：RGBA（242、88 ,. 6、0.87）;
ボーダーRADIUS：計6Px、
マウスディスプレイにズーム素子1.5に/ *セット* /
変換：スケール（1.5）;
-webkit-変換：（1.5）スケール;
-moz-変換：（1.5）スケール;
-O-変換：スケール（1.5）;
}
2Dチルト
1、文法
スキュー（AX、AY）。
AX：水平方向（X軸方向）の傾斜角（単位：度、度）
AY：垂直方向（Y軸方向）の傾斜角（単位：度、度）
2.パラメータ説明
それだけ傾斜X軸またはY軸方向に沿って設けられていてもよいです。
- skewX値（AX）は：単純にX軸傾斜を設定します
- skewY（AY）：単にY軸傾斜を設定します
図3に示すように、サンプルコード
コードと2次元コードの他の例変位
李：ホバー{
背景：RGBA（242、88 ,. 6、0.87）;
ボーダーRADIUS：計6Px;
/ *要素は、マウスが* /移動したとき左下隅に傾斜配置された
変換：（40°、-20deg）スキュー;
-変換-WebKitのを（40度、-20deg）スキュー;
-変換-moz：スキュー（40°、-20deg）;
-変換-o：スキュー（40°、-20deg）;
/ *変換：skewX値（40度）; * /
/ * -webkit-変換：skewX値（40度）; * /
/ * - MOZ-変換の：skewX値（40度）; * /
/ * - O-変換：skewX値（40度）; * /
}
2D回転
1、文法
回転（A）。
単位はパラメータ使用度によって表されます。
要素は、元の中心に対して時計方向に回転されたときにパラメータが正の値をとります。
2、サンプルコード
<head lang="en">
<meta charset="UTF-8">
<title>rotate的使用</title>
<style>
div {
width: 300px;
margin: 40px auto;
text-align: center;
}
img:hover {
/*定义动画的状态，鼠标移入旋转并放大图片*/
transform: rotate(-90deg) scale(2);
-webkit-transform: rotate(-90deg) scale(2);
-moz-transform: rotate(-90deg) scale(2);
-o-transform: rotate(-90deg) scale(2);
}
</style>
</head>
<body>
<div>
<img src="image/tx.jpg" alt="img"/>
</div>
</body>
变形小结
- rotate( )函数只是旋转，而不会改变元素的形状
- skew( )函数是倾斜，元素不会旋转，会改变元素的形状
transition过渡
定义
transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等。
CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡。
浏览器兼容性
- Firefox 4.0～15.0、Chrome 4.0～20.0、Safari 3.1～6.0和Opera 10.5～12.0，在这些浏览器中使用transition属性时需要添加不同的前缀。
- IE 10+、Firefox 16.0+、Chrome 26+、Safari 7.0+和Opera 12.1+，支持transition属性的标准语法，不需要添加浏览器的前缀。
语法
transition:[transition-property transition-duration transition-timing-function transition-delay ]
参数说明
- transition-property：过渡或动态模拟的CSS属性
- transition-duration：完成过渡所需要的时间
- transition-timing-function：指定过渡函数
- transition-delay：过渡开始出现的延迟时间
过渡属性（transition-property）
定义转换动画的CSS属性名称。语法：
transition-property: none|all| property;
过渡所需的时间（transition-duration）
定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）。
过渡动画函数（transition-timing-function）
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
- ease：速度由快到慢（默认值）
- linear：速度恒速（匀速运动）
- ease-in：速度越来越快（渐显效果）
- ease-out：速度越来越慢（渐隐效果）
- ease-in-out：速度先加速再减速（渐显渐隐效果）
过渡延迟时间（ transition-delay ）
指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
- 正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
- 负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
- 0：默认值，元素过渡效果立即执行
过渡的触发机制
- 伪类触发
- ：hover
- ：active
- ：focus
- ：checked
- 媒体查询：通过@media属性判断设备的尺寸，方向等
- JavaScript触发：用JavaScript脚本触发
使用transition实现过渡动画的使用步骤
- 在默认样式中声明元素的初始状态样式
- 声明过渡元素最终状态样式，如悬浮状态
- 在默认样式中通过添加过渡函数，添加一些不同的样式
animation动画
简介
animation实现动画主要由两个部分组成
- 通过类似Flash动画的关键帧来声明一个动画
- 在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
浏览器支持
设置关键帧
语法
说明：
- 在Firefox 5.0～21、Chrome 4.0+、Safari 4.0+、Opera 12.0～15.0浏览器中使用@keyframes属性时需要添加浏览器前缀。
- IE 10+、Firefox 21+，支持@keyframes属性的标准语法，不需要添加前缀。
- 写兼容的时候浏览器前缀是放在@keyframes中间：
例如：@-webkit-keyframes、@-moz- keyframes。
调用关键帧
语法
参数说明
示例代码
<head lang="en">
<meta charset="UTF-8">
<title>animation的使用</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
/*调用动画*/
animation: spread 2s linear infinite;
-webkit-animation: spread 2s linear infinite;
-moz-animation: spread 2s linear infinite;
-o-animation: spread 2s linear infinite;
}
/*创建动画关键帧*/
@keyframes spread {
0%{
width: 0;
transform: translate(100px,0);
}
25%{
width: 20px;
transform: translate(200px,0);
}
50%{
width: 50px;
transform:translate(300px,0);
}
75%{
width: 70px;
transform:translate(200px,0);
}
100%{
width: 100px;
transform:translate(100px,0);
}
}
@-webkit-keyframes spread {
0%{
width: 0;
transform: translate(100px,0);
}
25%{
width: 20px;
transform: translate(200px,0);
}
50%{
width: 50px;
transform:translate(300px,0);
}
75%{
width: 70px;
transform:translate(200px,0);
}
100%{
width: 100px;
transform:translate(100px,0);
}
}
</style>
</head>
<body>
<div></div>
</body>