變換transform
transform: rotate旋轉(zhuǎn) | scale放大/縮小 | skew扭曲 | translate移動(dòng);
屬性之間用空格隔開 注意：不是逗號(hào)“，”
1.translate
translate(<translation-value>[, <translation-value>
translateX(<translation-value>)
translateY(<translation-value>)
2.旋轉(zhuǎn)rotate
rotate(<angle>)
Transform:rotate(45deg);
Transform:rotateX(45deg);
Transform:rotateY(45deg);
Transform:rotateZ(45deg);
3.縮放scale
scale(<number>[, <number>])
scaleX(<number>)
scaleY(<number>)
4.扭曲skew
skew(<angle> [, <angle>])
skewX(<angle>)
skewY(<angle>)
改變?cè)鼗c(diǎn)transform-origin
transform-origin:X,Y
(1) transform-origin:left top:
(2) transform-origin:right
(3) transform-origin:25% 75%;
過渡transition
Transition: all 5s ease 0;
一艇拍、transition-property:
transition-property ： none | all | [ <IDENT> ]
二狐蜕、transition-duration:
transition-duration ： <time> [, <time>]
<time>為數(shù)值，單位為s（秒）或者ms(毫秒),
三卸夕、transition-timing-function:
1层释、ease：（逐漸變慢）默認(rèn)值，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
2快集、linear：（勻速）贡羔，linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)个初，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).
4乖寒、ease-out：（減速），ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0).
5院溺、ease-in-out：（加速然后減速）楣嘁，ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（該值允許你去自定義一個(gè)時(shí)間曲線）珍逸， 特定的cubic-bezier曲線马澈。 (x1, y1, x2, y2) 四個(gè)值特定于曲線上點(diǎn)P1和點(diǎn)P2。所有值需在[0, 1]區(qū)域內(nèi)弄息，否則無效痊班。
四、transition-delay:
transition-delay ： <time> [, <time>]
animation
animation-name: 動(dòng)畫名稱
animation-name: none | IDENT
IDENT是由Keyframes創(chuàng)建的動(dòng)畫名摹量，可以同時(shí)附幾個(gè)animation給一個(gè)元素涤伐，我們只需要用逗號(hào)“，”隔開
animation-duration 動(dòng)畫持續(xù)時(shí)間
取值:<time>為數(shù)值缨称，單位為s （秒.）其默認(rèn)值為“0”
animation-timing-function: 動(dòng)畫速度
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
animation-delay: 動(dòng)畫延遲時(shí)間
取值為<time>為數(shù)值凝果，單位為s(秒)，其默認(rèn)值也是0睦尽。
animation-iteration-count 動(dòng)畫次數(shù)
animation-iteration-count:infinite無限次播放 | <number>
animation-direction 動(dòng)畫運(yùn)動(dòng)方向
animation-direction: normal | alternate(來回) | reverse(反向) | alternate-reverse(反向來回)
animation-fill-mode 動(dòng)畫填充模式
規(guī)定動(dòng)畫在播放之前或之后器净，其動(dòng)畫效果是否可見。
animation-fill-mode : none | forwards | backwards | both;
none 不改變默認(rèn)行為当凡。
both 向前和向后填充模式都被應(yīng)用山害，兼具forwards和backwards纠俭。
forwards 當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）浪慌，效果留在結(jié)束位置上冤荆。
backwards 在 animation-delay 所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前权纤，應(yīng)用開始屬性值（在第一個(gè)關(guān)鍵幀中定義）钓简，效果留在剛剛那個(gè)位置。
animation-play-state: running/paused 動(dòng)畫的播放狀態(tài)
Keyframes “關(guān)鍵幀”
@keyframes 動(dòng)畫的名稱{
from{}
to{}
}
@keyframes IDENT {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
100% {
Properties:Properties value;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:200px;
height: 300px;
margin:20px auto;
position: relative;
}
div img{
position: absolute;
left: 0;
top:0;
width:200px;
height: 300px;
box-shadow: 6px 6px 2px #666;
transform-origin:bottom center;
/*transition: transform 2s linear;*/
transition: all 2s linear;
}
div:hover img:nth-child(1){
opacity: 0.2;
transform: rotate(-45deg);
}
div:hover img:nth-child(2){
opacity: 0.4;
transform: rotate(-30deg);
}
div:hover img:nth-child(3){
opacity: 0.3;
transform: rotate(-15deg);
}
div:hover img:nth-child(4){
opacity: 0.5;
transform: rotate(0deg);
}
div:hover img:nth-child(5){
opacity: 0.7;
transform: rotate(15deg);
}
div:hover img:nth-child(6){
opacity: 0.8;
transform: rotate(30deg);
}
div:hover img:nth-child(7){
opacity: 0.9;
transform: rotate(45deg);
}
div:hover img:nth-child(8){
opacity: 1;
transform: rotate(60deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
階躍函數(shù)
step(n,start/end)
from 開始狀態(tài) to 結(jié)束狀態(tài)
將animation-timing-function改為steps
<style>
div{
width:260px;
height: 220px;
margin: 100px auto;
background:url("img/pterodactyl.png") no-repeat;
animation: myfly 1s steps(5) infinite;
}
@keyframes myfly{
from{
background-position: 0 0;
}
to{
background-position: -1352px 0;
}
}
div:hover{
animation-play-state: paused;
}
</style>
