原文地址

简介

transitionde的功能：就是实现css的属性值在一定的时间区间内平滑的过渡。
除了javascript处罚外，还有一些伪类来触发：:hover; :focus; :active; :target; :checked。

创建过渡的步骤

• 在默认样式中声明元素的初始状态的样式；
• 声明过渡元素最终状态样式；
• 在默认样式中通过添加过渡函数，添加一些不同的样式。

        .transition{
        /*第一步：常规样式*/
            background:  #8ec63f;
            width:100px;
            height: 100px;
            border-radius: .5em;
        /*第三步：添加过渡函数*/
            -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:过渡函数
• transition-delay:过渡开始出现的延迟时间

transition-property

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

transition-duration

transition-timing-function

各个函数详解
1.单一的过渡函数
ease：默认值。由快变慢。

linear：匀速。
ease-in：速度越来越快，加速。

2.三次贝塞尔函数
使用方法：

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

自定义过渡函数

如图：可以明白自定义函数的原理。

显然，可以用cubic-bezier自定义出单一的过渡函数。

3.step()

step(integer,start/end)

一张图来说明：

transition-delay

这个属性和transition-duration一样简单，继续略。

触发过渡

1.伪元素触发

• :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.媒体查询触发
这种方法可以在实现不同的屏幕大小的时候可以平滑过渡。

3.javascript触发

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:表示生成的倒影在对象(原图)的左侧；
  • right:表示生成的倒影在对象(原图)的右侧；
• 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;
        /*下三角实现方法*/
        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》的笔记系列。源码均来自书上。
• 原文是在我的博客同步。