Web前端基礎知識

請多多指教！

今天來記錄一下關於css3實現動畫效果：
首先想到的肯定是animation,但是使用它得配合著@keyframes animationname {};

animation用法：

css中：元素{animation:name  時間 是否重複 是否逆向  }；

            是否重複:是infinite，否就不寫；是否逆向：是alternate,否：就不寫。

         @keyframes有兩種樣式：1.@keyframes name { from{屬性：屬性值}to{屬性：屬性值}};

                                                 2.@keyframes name{0%{屬性：屬性值}50%{屬性：屬性值}100%{屬性：屬性值}}。

實例：

        #box{
            width: 100px;
            height: 100px;
            background-color: #fc5652;
            animation: all 3s infinite alternate;
        }
        @keyframes all {
            from{
                width: 100px;
            }
            to{
                width: 300px;
            }
        }

之後想到了transition:但是它需要一個事件觸發，在css中觸發就用hover就可以測試：

transition用法：

css中：元素{transition ：屬性名 時間};若是想實現多個屬性變化就將屬性名該為all也可以用逗號隔開

在事件中：元素:hover{屬性名：屬性值}，這裡的屬性名為：需要改變的屬性名。

實例：

    #main{    
        width: 100px;
        height: 200px;
        background-color: #34c94a;
        transition: height 2s;
    }
    #main:hover{
        height: 400px;
    }

而在製作動畫時常用到：transform；

transform用法：

它包含很多屬性：1.translate(x,y)：2D轉換，將元素平移;

                           2.rotate(弧度)：將元素旋轉；

                          3.scale(大小)：將元素縮放：0-1；

若是要一起使用多個屬性：transform：translate(x,y) rotate(弧度)；空間用空格隔開；

實例:

#main{
    width: 100px;
    height: 200px;
    background-color: #34c94a;
    transform: rotate(30deg) scale(0.3);
   transition: all 2s;
}
#main:hover{
    height: 400px;
    width: 300px;
}

有些時候我們還會用到3D旋轉：

關於它的用法：要設置旋轉中心transform-origin:left;3D旋轉：-webkit-transform-style：preserve-3d；

這是我製作的一個水泡：

.bubble{
       width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 5px solid gold;
    background-color: whitesmoke;
    transform: scale(0.1);
    animation:my 2s infinite;
}
@keyframes my {
    from{
        transform: scale(0.1);
        border: 5px solid gold;
    }
    to{
        transform: scale(1);
        border: 5px solid #fbf6d6;
    }
}

或者是製作幻燈片播放圖片：

#box{
    width: 200px;
    height: 200px;
    background-image: url("img/img1.jpeg");
    background-size: 100% 100%;
    animation: move 5s infinite;
}
@keyframes move {
    20%{
        background-image: url("img/img1.jpeg");
    }
    40%{
        background-image: url("img/img2.jpeg");
    }
    60%{
        background-image: url("img/img3.jpeg");
    }
}

以上就是目前接觸到的一些css3動畫。