css3 animation动画

 

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速) | ease(缓冲) | steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n | infinite(无限次数)
7、animation-direction 动画结束后是否反相还原 normal | alternate
8、animation-play-state 动画状态 paused(停止) | running（运动）
9、animation-fill-mode 动画前后的状态 none(缺省) | forwards(结束时停留在最后一帧) | backwards(开始时停留在定义的开始帧) | both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*定义动画*/
        @keyframes moving{
            from{
                width:100px;
            }

            to{
                width:500px;
            }
        }

        .box{
            width:100px;
            height:100px;
            background-color:gold;

            animation:moving 1s ease infinite alternate
        }
        
        /*鼠标移到停止动画*/
        .box:hover{
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

 

风车动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>风车动画</title>
    <style>

        @keyframes rotating{
            from{
                transform: rotate(0deg);
            }

            to{
                transform: rotate(360deg);
            }

        }
        
        .zhuan{
            display: block;
            width:300px;
            height:240px;
            margin:50px auto 0;

            animation: rotating 1s linear infinite

        }




    </style>
</head>
<body>
    <img src="fan.jpg" alt="fan" class="zhuan">
</body>
</html>

 

loading动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>loading</title>
    <style>
        .con{
            width:300px;
            height:159px;
            border:1px solid #000;
            margin:150px auto;
        }

        .con div{
            width:30px;
            height:100px;
            float: left;
            background-color:gold;
            margin:15px;
            border-radius: 15px;
            animation:loading 500ms ease infinite alternate; 
        }

        .con div:nth-child(1){
            background-color: red;
        }

        .con div:nth-child(2){
            background-color:green;
            animation-delay:100ms;
        }

        .con div:nth-child(3){
            background-color: pink;
            animation-delay:200ms;
        }
        
        .con div:nth-child(4){
            background-color:lightgreen;
            animation-delay:300ms;
        }

        .con div:nth-child(5){
            background-color: lightblue;
            animation-delay:400ms;
        }

        .con p{
            text-align: center;
        }

        @keyframes loading{
            from{
                transform: scale(1,1);
            }

            to{
                transform: scale(1,0.5);
            }
        }

    </style>

</head>
<body>
    <div class="con">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <p>loading...</p>
    </div>
</body>
</html>

 

 

关键帧动画animation-timing-function 动画曲线 linear(匀速) | ease(缓冲) | steps(步数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        @keyframes walking{
            from{
                left:0px;
            }

            to{    
                /*整个图片的长度*/
                left:-1450px;
            }

        }

        .box{
            width:210px;
            height:300px;
            border:1px solid #ddd;
            margin:50px auto;
            overflow: hidden;
            position: relative;
        }    
        
        .box img{
            position: absolute;
            left:0;
            top:0;

            animation:walking 1s steps(8) infinite;
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="walk.png" alt="">
    </div>
</body>
</html>

 

posted @ 2019-03-02 22:12  greenfan  阅读(135)  评论(0)    收藏  举报