Transition 簡寫
/* 參數使用方式 */ transition: margin-right 2s; /* 動畫時間 */ transition: margin-right 2s .5s; /* 動畫時間+延遲 */ transition: margin-right 2s ease-in-out; /* 動畫時間+屬性類別 */ transition: margin-right 2s ease-in-out .5s; /* 動畫時間+屬性類別+延遲 */ transition: margin-right 2s, color 1s; /* 動畫時間+屬性類別+延遲 */ transition: all 1s ease-out; /* 運用於所有屬性，動畫時間+屬性類別 */ /* Apply to 1 property */ /* property name | duration */ transition: margin-right 4s; /* property name | duration | delay */ transition: margin-right 4s 1s; /* property name | duration | easing function */ transition: margin-right 4s ease-in-out; /* property name | duration | easing function | delay */ transition: margin-right 4s ease-in-out 1s; /* Apply to 2 properties */ transition: margin-right 4s, color 1s; /* Apply to all changed properties */ transition: all 0.5s ease-out; /* Global values */ transition: inherit; /* 繼承 */ transition: initial; /* 初始 */ transition: unset; /* 未設置 */
範例
/*滑鼠滑入延遲1秒後，開始改變字體大小(共4秒)*/
a {
font-size: 14px;
transition: font-size 4s 1s;
}
a:hover {
font-size: 36px;
}
Transition 屬性
transition : transition-property | transition-duration | transition-timing-function | transition-delay;
ransition-property 屬性轉換
指定CSS屬性轉換效果
/* 參數使用方式 */ transition-property: margin-right; transition-property: margin-right, color; transition-property: all; transition-property: none; /* <custom-ident> values */ transition-property: test_05; transition-property: -specific; transition-property: sliding-vertically; /* Multiple values */ transition-property: test1, animation4; transition-property: all, height, color; transition-property: all, -moz-specific, sliding; /* Global values */ transition-property: inherit; /* 繼承 */ transition-property: initial; /* 初始 */ transition-property: unset; /* 未設置 */
範例
/*改變字體大小(共4秒)*/
a {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
}
a:hover {
font-size: 36px;
}
/*向右滑動*/
.slideRight {
position: absolute;
-moz-transition-property: background-color, color, left;
-moz-transition-duration: 5s;
-webkit-transition-property: background-color, color, left;
-webkit-transition-duration: 5s;
-o-transition-property: background-color, color, left;
-o-transition-duration: 5s;
background-color: red;
left: 0%;
color: black;
}
/*向左滑動*/
.slideLeft{
position: absolute;
-moz-transition-property: background-color, color, left;
-moz-transition-duration: 5s;
-webkit-transition-property: background-color, color, left;
-webkit-transition-duration: 5s;
-o-transition-property: background-color, color, left;
-o-transition-duration: 5s;
text-align: center;
background-color: blue;
left: 90%;
color: white;
width: 100px;
height: 100px;
}
transition-duration 時間
設定動畫播放時間(速度)，預設0，單位為s或ms，數字越大，速度越慢
/* 參數使用方式 */ transition-duration: 500ms; transition-property: margin-right; transition-duration: 2s; transition-property: background-color; transition-duration: 2s; transition-property: margin-right, color; transition-duration: 3s, 1s; transition-property: margin-right, color;
/* 播放速度快到慢，0.5秒到4秒 */ transition-duration: 0.5s transition-duration: 1s transition-duration: 2s transition-duration: 4s /* <time> values */ transition-duration: 6s; transition-duration: 120ms; transition-duration: 1s, 15s; transition-duration: 10s, 30s, 230ms; /* Global values */ transition-duration: inherit; /* 繼承 */ transition-duration: initial; /* 初始 */ transition-duration: unset; /* 未設置 */
transition-delay 延遲
延遲多久轉換，預設0，單位為s或ms
/* 參數使用方式 */ transition-delay: 250ms; transition-property: margin-right; transition-delay: 1s; transition-property: background-color; transition-delay: 1s; transition-property: margin-right, color; transition-delay: 1s, 250ms; transition-property: margin-right, color; /* 延遲時間短到長，0.5秒到4秒 */ transition-duration: 0.5s transition-duration: 1s transition-duration: 2s transition-duration: 4s /* <time> values */ transition-delay: 3s; transition-delay: 2s, 4ms; /* Global values */ transition-delay: inherit; /* 繼承 */ transition-delay: initial; /* 初始 */ transition-delay: unset; /* 未設置 */
/* 延遲效果 */
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 3s; /* Safari */
-webkit-transition-delay: 1s; /* Safari */
transition: width 3s;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
transition-timing-function 曲線
/* 參數使用方式 */ transition-timing-function: linear; transition-timing-function: ease-in; transition-timing-function: steps(6, end); transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);
linear
線性速率播放
where
<timing-function> = linear | <cubic-bezier-timing-function> |<step-timing-function>
| linear | 均速 | = cubic-bezier(0.0, 0.0, 1.0, 1.0) |
ease
定義貝茲曲線速度，預設ease
where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier([0,1]>,<number> , [0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps([<integer>, <step-position>]?)
| ease | 漸快→漸慢 | = cubic-bezier(0.25, 0.1, 0.25, 1.0) |
| ease-in | 漸快 | = cubic-bezier(0.42, 0, 1.0, 1.0) |
| ease-out | 漸慢 | = cubic-bezier(0, 0, 0.58, 1.0) |
| ease-in-out | 漸快 → 漸慢 → 漸快 | = cubic-bezier(0.42, 0, 0.58, 1.0) |
| cubic-bezier( n,n,n,n) | 以貝茲曲線自定義速度模式，n=0~1中的數值 | = cubic-bezier(0.1, 0.5 , 0.1 , 0.5) |
steps
物件等距跳動效果 ( n,<jumpterm> )
n = 跳動數<jumpterm = 方式> (number, position)
where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
| jump-start = position:start | 起始點物件由寬左邊開始計算跳耀點 | |
| jump-end = position:end | 起始點物件由寬右邊開始計算跳耀點 | |
| jump-none | 0％和100％，跳動時間1 / n | |
| jump-both | 0％和100％停頓，時間內增加1步 | |
| start | 快速開始 | = jump-start |
| end | 快速結束 | = jump-end |
| step-start | 逐步開始 | = steps(1, jump-start) |
| step-end | 逐步結束 | = steps (1, jump-end) |
/* 參數使用方式 */ /* Keyword values */ transition-timing-function: ease; transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: ease-in-out; transition-timing-function: linear; transition-timing-function: step-start; transition-timing-function: step-end; /* Function values */ transition-timing-function: steps(4, jump-end); transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); /* Steps Function keywords */ transition-timing-function: steps(4, jump-start); transition-timing-function: steps(10, jump-end); transition-timing-function: steps(20, jump-none); transition-timing-function: steps(5, jump-both); transition-timing-function: steps(6, start); transition-timing-function: steps(8, end); /* Multiple timing functions */ transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* Global values */ transition-timing-function: inherit; /* 繼承 */ transition-timing-function: initial; /* 初始 */ transition-timing-function: unset; /* 未設置 */
transition timing effect 範例
完整標示
/*延遲2秒，改變字體大小(共4秒)*/
a{
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
font-size: 14px;
}
a:hover{
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
font-size: 36px;
}
選單範例
/*連結顏色漸變效果*/
a{
color: #06c;
}
a:hover{
color:#5AA0E6;
-o-transition: color .20s linear;
-webkit-transition: color .20s linear;
-moz-transition: color .20s linear;
transition: color .20s linear;
}
/*連結背景顏色與框漸變效果*/
*:link, *:visited, *:hover, *:active, *:focus , * {
-o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
-webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
-moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
transition: color .20s linear, background-color .20s linear, border-color .20s linear;
}
區塊範例
/*區塊縮放漸變效果*/
/*寬度*/
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}
/*長寬*/
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}
/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Standard syntax */
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
旋轉範例
/*Transition + Transform 旋轉效果*/
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
-webkit-transform: rotate(180deg); /* Safari */
transform: rotate(180deg);
}
