原文地址

簡介

transitionde的功能：就是實現(xiàn)css的屬性值在一定的時間區(qū)間內(nèi)平滑的過渡。
除了javascript處罰外，還有一些偽類來觸發(fā)：:hover; :focus; :active; :target; :checked。

創(chuàng)建過渡的步驟

• 在默認樣式中聲明元素的初始狀態(tài)的樣式；
• 聲明過渡元素最終狀態(tài)樣式；
• 在默認樣式中通過添加過渡函數(shù)，添加一些不同的樣式。

        .transition{
        /*第一步：常規(guī)樣式*/
            background:  #8ec63f;
            width:100px;
            height: 100px;
            border-radius: .5em;
        /*第三步：添加過渡函數(shù)*/
            -webkit-transition: background 2s linear 2s, border-radius 3s ease-in-out;
            -o-transition: background 2s linear 2s, border-radius 3s ease-in-out;
            transition: background 2s linear 2s, border-radius 3s ease-in-out;
        }
        /*第二步：聲明最終樣式*/
        .transition:hover{
            background: #f7941d;
            border-radius: 50%;
        }

兼容性

當然雖然支持很好，但是在使用的時候還是要加上瀏覽器的前綴。

過渡屬性詳解

復合屬性：

transition:transition-property transition-duration transition-timing-function transition-delay ;

• transition-property:指定過渡的css屬性
• transition-duration:過渡所需的時間
• transition-timing-function:過渡函數(shù)
• transition-delay:過渡開始出現(xiàn)的延遲時間

transition-property

1.取值：all/none/single-transition-property
2.關于single-transition-property；并不是所有的屬性值均可以用這個的。具有中值屬性的屬性才可以。
3.整理

transition-duration

transition-timing-function

各個函數(shù)詳解
1.單一的過渡函數(shù)
ease：默認值。由快變慢。

linear：勻速。
ease-in：速度越來越快，加速。

2.三次貝塞爾函數(shù)
使用方法：

transition-timing-function: cubic-bezier(P0, P1, P2, P3)

自定義過渡函數(shù)

如圖：可以明白自定義函數(shù)的原理。

顯然，可以用cubic-bezier自定義出單一的過渡函數(shù)。

3.step()

step(integer,start/end)

一張圖來說明：

transition-delay

這個屬性和transition-duration一樣簡單，繼續(xù)略。

觸發(fā)過渡

1.偽元素觸發(fā)

• :active點擊鼠標并且需要按住。
• :focus
• :checked
• :hover

input[type="radio"] ~ span{
    width:100px;
    /*display:block;*/
    border:1px solid red;
    transition:width 2s ease-in 1s;
}
input[type="radio"]:checked ~ span{
    width:200px;
}

2.媒體查詢觸發(fā)
這種方法可以在實現(xiàn)不同的屏幕大小的時候可以平滑過渡。

3.javascript觸發(fā)

css Dock示例總結

• webkit獨有的鏡像屬性box-reflec
  使用方法：

-webkit-box-reflect：none | <direction> <offset>? <mask-box-image>
box-reflect：none | <direction> <offset>? <mask-box-image>

取值說明：

• none:此值為box-reflect默認值，表示無倒影效果；
• <direction>:此值表示box-reflect生成倒影的方向，主要包括以下幾個值：
  • above:表示生成的倒影在對象（原圖）的上方；
  • below:表示生成的倒影在對象（原圖）的下方；
  • left:表示生成的倒影在對象(原圖)的左側(cè)；
  • right:表示生成的倒影在對象(原圖)的右側(cè)；
• offset:用來設置生成倒影與對象（原圖）之間的間距，其取值可以是固定的像素值，也可以是百分比值，如：
  • 使用長度值來設置生成的倒影與原圖之間的間距，只要是CSS中的長度單位都可以，此值可以使用負值；
  • 使用百分比來設置生成的倒影與原圖之間的間距，此值也可以使用負值。
• mask-box-image:用來設置倒影的遮罩效果，可以是背景圖片，也可以是漸變生成的背景圖像。

-webkit-box-reflect: below -16px -webkit-gradient(
    linear, left top, left bottom,
    from(transparent),
    color-stop(91%, rgba(255, 255, 255, .1)),
    color-stop(91.01%, transparent),
    to(transparent)
);

• 模仿tooltips效果

    .dock em {
        position: absolute;
        top: -34px;
        left: 50%;
        display: none;
        width: 150px;
        margin-left: -75px;
        text-align: center;
    }
    .dock em:after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -6px;
        width: 0;
        height: 0;
        /*下三角實現(xiàn)方法*/
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid rgba(0, 0, 0, .6);
        border-bottom: none;
    }
    .dock em span {
        display: inline-block;
        padding: 5px 12px;
        font-size: 14px;
        font-style: normal;
        color: #FFF;
        background: #000;
        background: rgba(0, 0, 0, .6);
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);
        border-radius: 12px;
    }
.dock li:hover em, 
.dock li a:focus em {
    display: block;
}

說明

• 這個是看大漠編寫的《圖解css3》的筆記系列。源碼均來自書上。
• 原文是在我的博客同步。