css3常用语言-动画
一.轉換(平移/縮放)
1.transform
對元素進行旋轉、縮放、移動或傾斜。
transform屬性是靜態屬性，一旦寫到style里面，將會直接顯示作用，無任何變化過程。
transform的主要用途是用來做元素的特殊變形，對于做設計的人來說并不是很陌生，簡單的來說就是css 的圖形變形
工具。
變形的順序是從左到右依次進行
①skew(x-angle,y-angle) 傾斜
?②translate平移
A.transform:translate(295px,115px)
B.translate3d(x,y,z)
③scale 縮放
A.transform: scale(sx,sy);如scale(2,2)
B.scale3d(x,y,z)
④rotate(angle) 旋轉
A.transform:rotate(45deg);
B.3d:rotate(x,y,z,angle)
⑤matrix矩陣
（指的是一個方法，書寫為matrix()和matrix3d()）
A.matrix(n,n,n,n,n,n)2D平面的移動變換(transform) 矩陣為3*3。。6個值 ?matrix(a,b,c,d,e,f)::a和c是縮放的大小（a是x的縮放,c是y軸的縮放） e和f是表示平移多少(e表示x軸平移多少，f表示y軸平移多少) b和c表示拉伸多少(b表示x軸傾斜的角度,c表示y軸傾斜的角度) ?transform:matrix(0.866,0.5,-0.5,0.866,0,0) B.matrix3d matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 3D變換，4*4的矩陣。16個值
2.transform-origin?
屬性允許您改變被轉換元素的位置。
3.transform-style
屬性規定如何在 3D 空間中呈現被嵌套的元素。
該屬性必須與 transform 屬性一同使用。transform-style：preserve-3d
注意：ie不支持
transform-style: flat(不保存3d效果)|preserve-3d;(3d效果)
4.perspective透視效果
目前瀏覽器都不支持 perspective 屬性。Chrome 和 Safari 支持替代的 -webkit- <style> #div1{ position: relative; height: 150px; width: 150px; margin: 50px; padding:10px; border: 1px solid black; perspective:150; -webkit-perspective:150; /* Safari and Chrome */ }#div2{ padding:50px; position: absolute; border: 1px solid black; background-color: yellow; transform: rotateX(45deg); -webkit-transform: rotateX(45deg); /* Safari and Chrome */ } </style> <div id="div1"> ? <div id="div2">HELLO</div> </div>
5.perspective-origin規定 3D 元素的底部位置。
目前瀏覽器都不支持 perspective 屬性。Chrome 和 Safari 支持替代的 -webkit-6.backface-visibility
定義元素在不面對屏幕時是否可見。只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 屬性。
Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 屬性。
二.過渡
transition
從一種樣式改變為另一種的過程效果
transition：transition-property ?transition-duration ?transition-timing-function transition-delay
過渡css屬性的名稱(或是all) ?花費的總時間 ?速度方式 ?動畫何時開始
注意：不能自行觸發，通過hover等動作或結合JS進行觸發
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:yellow; transition:width 2s, height 2s; -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */ -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */ -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */ }div:hover { width:200px; height:200px; transform:rotate(180deg); -moz-transform:rotate(180deg); /* Firefox 4 */ -webkit-transform:rotate(180deg); /* Safari and Chrome */ -o-transform:rotate(180deg); /* Opera */ } </style> </head> <body><div>請把鼠標指針放到黃色的 div 元素上，來查看過渡效果。</div><p><b>注釋：</b>本例在 Internet Explorer 中無效。</p></body> </html>
三.動畫
ie10,Firefox 以及 Opera 支持 animation 屬性。Safari 和 Chrome 支持替代的 -webki
1.animation：自動運行
animation：animation-name ?animation-duration ?animation-timing-function ?animation-delay animation-iteration-count ? animation-direction;
?keyframe名稱 所花費總時間 ??速度方式 ??動畫何時開始?播放次數 ?是否反向播放
①animation-timing-function 速度方式
linear均速 ease 默認。動畫以低-加快-慢。 ease-in 動畫以低速開始。 ease-out 動畫以低速結束。 ease-in-out 動畫以低速開始和結束。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。②animation-iteration-count播放次數
infinite ?無限次
③animation-direction 是否輪流反向播放動畫。
alternate 輪流反向 ? normal正常播
2.@keyframes
0%和100%，0%是開始時間 ?100%結束時間@keyframes animationname {
from {top:0px;} to {top:200px;}}
0%和100%，0%是開始時間 ?100%結束時間
3.animation-play-state?動畫運行還是暫停
paused規定動畫已暫停。
running 規定動畫正在播放。
在 JavaScript 中使用該屬性，這樣就能在播放過程中暫停動畫。
4.animation-fill-mode?
動畫在播放之前或之后，其動畫效果是否可見
animation-fill-mode : none | forwards | backwards | both;
none 不改變默認行為。
forwards 當動畫完成后，保持最后一個狀態
backwards 在動畫顯示之前，開始狀態。
both 向前和向后填充模式都被應用。其實跟沒有改變狀態一樣（none）
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ } @keyframes myfirst{ from {background:red; } to {background:yellow;width:300px;} } @-moz-keyframes myfirst /* Firefox */ { from {background:red;} to {background:yellow;width:300px;} }@-webkit-keyframes myfirst /* Safari and Chrome */ { from {background:red;} to {background:yellow;width:300px;} }@-o-keyframes myfirst /* Opera */ { from {background:red;} to {background:yellow;width:300px;} } </style> </head> <body> <div></div> </body> </html>
總結
以上是生活随笔為你收集整理的css3常用语言-动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 想找一个真心交流的的师父（.netphp
- 下一篇： Proxmox Mail Gateway