过渡与动画

过渡

概念：就是指元素从一个状态变为另一个状态的过程。
通过transition 属性来指定，它的语法格式为：
- transition-property：指定要用于过渡的属性名称，如：width、height、background、......
- transition-duration：过渡持续时间，单位是秒。
- transition-timing-function：过渡的的运行曲线，默认是 ease
- transition-delay：延迟执行时间，单位为秒。
如果希望元素的多个属性都具有过渡的效果，那么我们就可以把过渡属性的值设置为 all 即可。

<style>
    #container {
        width: 1000px;
        height: 300px;
        border: 1px solid #cccccc;
    }
    .box {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 100px;
        height: 100px;
        background: blueviolet;

        /*过渡*/
        /*transition-property: left;
        transition-duration: 2s;
        transition-timing-function: ease;
        transition-delay: 0s;*/
        transition: all 2s linear ;
    }
    #container:hover .box {
        left: 300px;
        border-radius: 50%;
        background: deeppink;
    }
</style>

实现进度条的效果：

<style>
    .box {
        width: 150px;
        height: 15px;
        border: 1px solid #f00;
        border-radius: 5px;
    }
    .bar {
        width: 0%;
        height: 100%;
        background-color: red;
        border-radius: 5px;
        transition: width 1s ease-out;
    }
    .box:hover .bar {
        width: 90%;
    }
</style>

移动:
 

<style>
    div {
        width: 100px;
        height: 75px;
        border: 1px solid black;
        background-color: #cccccc;
    }
    div#div2 {
        /*transform: translate(50px, 100px);*/
        transform: translateY(50px);
        transform: translateX(50px);
        background-color: green;
    }
</style>

旋转：

<style>
    .box {
        position: absolute;
        left: 200px;
        top:200px;
        width: 200px;
        height: 200px;
        background-color: blueviolet;

        transform-origin: 10px 10px;
        transform: rotate(45deg);
    }
</style>

改变旋转中心点：

<style>
    div {
        overflow: hidden;
        width: 200px;
        height: 200px;
        border: 1px solid pink;
        margin: 10px;
        float: left;
    }
    div::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: hotpink;
        transform: rotate(180deg);
        transform-origin: left bottom;
        transition: all .5s ease;
    }
    div:hover::before {
        transform: rotate(0deg);
    }
</style>

缩放：

缩放使用 transform: scale() 来实现，
语法格式为：
transform: scale(x, y)

它有以下几种书写方式：
- transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
- transform:scale(2,2) ：宽和高都放大了2倍
- transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
- transform:scale(0.5, 0.5)：缩小

<style>
    div {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: deeppink;
    }
    div:hover {
        transform: scale(.2,.2);
    }
</style>

动画：

使用动画之前需要通过@keyframe 来定义动画，再通过 animation 属性来定义名称
定义是需要告诉他动画如何完成。
1.开始状态 from (还可用百分比来指定)
2.结束状态 to  （同上）
注意：要想动画有效果，需要定义好动画之外，还需要给这个元素进行绝对定位。
animation是动画的简写方式，里面也有很多属性：
animation：动画的名称 持续时间 动画曲线 延迟时间 动画状态 是否可以逆向播放
分别为：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-fill-mode （backwards：回到起始 forwards：停下）
animation-direction （默认为normal，动画执行完毕会放到开始处。
                      alternate为逆播放，完毕后再逆向返回）
animation-iteration-count (infinite:重复播放)

规定动画是否暂停--animation-play-state
这两个需要单独使用
-running：
-paused：

<style>
    .box{
        position: absolute;
        left: 10px;
        top: 10px;
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: MOVE;
        animation-duration: 2s;
        animation-timing-function: ease;
        animation-iteration-count: 1;
        animation-fill-mode: backwards;
        animation-direction:alternate;

    }
    .box:hover {



    }
    /*定义动画*/
    @keyframes MOVE {
        /*from{
            left:10px;

        }
        to{
            left:100px;

        }*/
        0%{
            left: 10px;

        }
        100%{
            left: 100px;
        }
    }


</style>

3d显现效果：

<style>
    body {
        perspective: 400px;
    }
    .box {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 100px auto;
        transition: all .4s;
        /* 让背面的紫色盒子保留立体空间 给父级添加的 */
        transform-style: preserve-3d;
    }
    .box:hover {
        transform: rotateY(180deg);
    }
    .front,.back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        font-size: 30px;
        color: #fff;
        text-align: center;
        line-height: 300px;
    }
    .front {
        background-color: blue;
        z-index: 1;
    }
    .back {
        background-color: purple;
        transform: rotateY(180deg);
    }
</style>

结束~ ！~