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;
            }
        }