过渡与动画

网页中过渡与动画是一种流行的表现手法，可以让界面显得更加生动和真实，接下来我们介绍的css3新特性，可以让你的web变得更加富有动感，让我们来看看精彩的案例吧！

程序员必读

Css3编码技巧

1.弹性过渡–纯css实现表单提示层效果

知识点：贝塞尔曲线在线工具

用户名 请输入用户名

.tip{
    position: absolute;
    margin-left: -200px;
    margin-top: 36px;
    padding: 2px 6px;
    font-size: 12px;
    color: #fff;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #06c;
    transform-origin: 0 0; /* 关键 */
    transition: transform .5s cubic-bezier(.25,.1,.3,1.5); /* 关键 */
}
input{
    width: 200px;
    height: 26px;
}
input:not(:focus) + .tip{
    transform: scale(0);  /* 关键 */
    transition: transform ease .25s;  /* 关键 */
}

2.逐帧动画

知识点：steps()

正在加载...

.keyframes-wrap{
    background: url(http://p3g4ahmhh.bkt.clouddn.com/animate.jpg) no-repeat top left;
    animation: loader 1s infinite steps(8);
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
}
@keyframes loader {
    to { background-position: -1024px; }
}

3.利用css控制动画的暂停和播放

知识点：animation-play-state

.bg-wrap{
    background: url(http://p3g4ahmhh.bkt.clouddn.com/bg.jpg);
    background-size: auto 100%;
    animation: move 5s linear infinite alternate;
    animation-play-state: paused;
}
.bg-wrap:hover,.bg-wrap:focus{
    animation-play-state: running;
}
@keyframes move {
    to { background-position: 100% 0; }
}

4.沿环形路径平移的动画

知识点：transform: rotate(1turn); transform-origin变换的源点是基于自身的尺寸,默认值为自身的中心

/* 首先要想方法让头像在父元素中居中 */
.avator{
    animation: spin 5s linear infinite;
}

@keyframes spin {
    from{
        transform: rotate(0turn)
                   translateY(-100px) translateY(50%)
                   rotate(1turn)
    }
    to{
        transform: rotate(1turn)
                   translateY(-100px) translateY(50%)
                   rotate(0turn)
    }
}