css的動畫animation

animation-name: 動畫一，動畫名字二；///這個要定義到元素標簽css樣式內
animation-duration: 4s (動畫1)，2s（動畫二）; //動畫持續時間如果有多個名字動畫會循環使用時間
animation-delay:2s; //動畫延時啟動
animation-fill-mode:forwards;//結束畫面停止到最后一幀 //backwards動畫開始前使用第一幀
animation-iteration-count: 2;//循環次數 infinite無限循環
animation-direction: reverse; //動畫反轉播放。normal動畫正序播放。alternate先正序在倒敘。alternate-reverse先倒敘在正序
animation-timing-function: cubic-bezier(0,.63,.94,.42); //自定義動畫執行的速度 //ease一直減慢 //ease-in 先快后慢 //ease-out 先慢后快 //ease-in-out 兩邊慢中間快 //linear均速運動
animation-timing-function: steps(4,end); //步進運動方式動畫 steps(4,start);
animation-play-state:paused; //動畫停止 running開始動畫

 

幀動畫內%可以結合使用
比如說定義兩個5%樣式不一樣可以一塊使用

相同時間或后面大約前面時間內樣式沖突會覆蓋后面的優先級高

 

@keyframes name {}  ///定義動畫可以是to form 也可以 0%~100%

transform:translate ,Y ,X( 0, 0) //移動動畫
transform:scale(2); //縮放倍數
transform:rotate(360deg); //旋轉360度
transform-origin: 100% 100% ; ///動畫開始位置

可在動畫的每一個階段做不一樣的樣式

不必只有以上的樣式規范，可以隨心所欲的制作自己的樣式

比如

transform:scale(2); //縮放倍數

 

也可以使用width與height來代替

transform:translate ,Y ,X( 0, 0) //移動動畫

也可用使用margin、padding、position等

.shanghua {
            position: absolute;
            bottom: -8vh;
            left: 20vw;
            width: 60vw;
            animation-name: shanghuas,jinchang ;
            animation-duration: 0.8s;
            animation-iteration-count: infinite;
        }
        @keyframes jinchang {
            0% {
                top: 45vh;
                left: -5vw;
                width: 0vw;
            }
            50%{
                               .........
                         }
            100% {
                top: 42vh;
                left: 15vw;
                width: 70vw;
            }
        }
        @keyframes shanghuas {
            to {
                bottom: -9vh;
            }
            form {
                bottom: -8vh;
            }
        }