css动画

作者: YU不忘初心 | 来源:发表于2018-08-15 22:55 被阅读0次

CSS-3D知识
Css动画小球横移
网页高级知识点（三）
有用的Vue第三方库
动画类文章
Vue.js 过渡动画
前端开发入门到实战：CSS动画@keyframes的用法
2018-06-13
2018-08-15
CSS3 动画

写到css样式里
transition: all 1s ease-in-out 2s;
变化曲线的值

ease:默认值,先快再快再慢
ease-in:淡入(动画刚开始的时候变化慢)
ease-out:淡出(动画快结束的时候变化慢)
ease-in-out:淡入淡出(开始慢,中间块,结束慢)
linear:线性(匀速变化)
过渡动画当失去触发时机,会恢复到原来的状态

触发过渡动画的时机:

•1,hover(最常用)
关键帧动画
动画效果

animation:name 5s ;
由@keyframes决定
1,@keyframes必须写在css样式里面
2,@keyframes中的动画名要和animation-name的名字一样
@keyframes 动画名{
from{修改的属性值}
to{修改的属性值}
}

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>loding</title>
    <style type="text/css">        
        .box{
            width:650px;
            height:280px;
            border:3px solid #000;            
            margin:50px auto 0;
            position:relative;
                      
        }
        
        .boxload{
            position:absolute;
            width:100px;
            height:10px;
            text-align:center;
            line-height:272px;
          
            
            left:275px;
            top:120px;
        }
        .box1{
            
            width:50px;
            height:100px;
            background-color: red;
            position: absolute;
            left:150px;
            top:90px;
            transform-style:preserve-3d;
       /*     transition:all 500ms ease ;  */
            animation:walking 500ms  ease 0s infinite;    
            border-radius: 20px;    
            alternates;  
        }
        .box2{
            
            width:50px;
            height:100px;
            background-color: yellow;
            position: absolute;
            left:250px;
            top:90px;
            transform-style:preserve-3d;
          /*  transition:all 500ms ease ; */   
            animation:walking 500ms   ease 100ms infinite;     
            border-radius: 20px;   
            alternates;    
        }
      
        .box3{
            
            width:50px;
            height:100px;
            background-color: blue;
            position: absolute;
            left:350px;
            top:90px;
            transform-style:preserve-3d;
           /* transition:all 500ms ease ;   */  
            animation:walking 500ms  ease 200ms infinite;  
            border-radius: 20px;   
            alternates;      
        }
        .box4{
            
            width:50px;
            height:100px;
            background-color: green;
            position: absolute;
            left:450px;
            top:90px;
            transform-style:preserve-3d;
          /*  transition:all 500ms ease ;  */
            animation:walking 500ms  ease 300ms infinite;     
            border-radius: 20px;      
            alternates;   
        }
        
      @keyframes walking{
            from{
                
                transform:perspective(800px) scaleY(0);
            }

            to{
                transform:perspective(800px) scaleY(2);
            }
        }
        

    </style>
</head>
<body>
    <div class="box">
        <div class="boxload">LODING</div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        
        
    </div>


</body>
</html>