css-动画-animation 单属性 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 
                配置属性：
                    1.animation-name: donghua;---------动画名称
                    2.animation-duration:4s -----------动画时间
                    3.animation-timing-function-------动画过度效果
                            linear 匀速
                            ease    慢-快-慢
                            ease-in    慢开始
                            ease-out 慢结束
                    4.animation-play-state: running;---动画播放的状态
                            running：播放（默认值）
                            paused：暂停
                    5.animation-iteration-count: 1;-----动画次数
                            默认 1 表示1次
                            infinite 无限次
                    6.animation-delay: 0s;-----动画延时
                    7.animation-direction: normal;------动画的方向 
                            normal 正向 默认值
                            reverse 反向
                            alternate 正向有来有去
                            alternate-reverse 反向有来有去
            */
            #demo{
                width: 300px;
                height: 40px;
                background-color: skyblue;
                margin: 300px auto;
                animation-name:xuanzhuan;
                animation-duration: 3s;
                animation-timing-function:linear;
                animation-iteration-count:infinite;
                /* animation-delay:3s; */
                animation-direction:alternate;
            }
            #demo:hover{
                animation-play-state:paused
            }
            @keyframes xuanzhuan{
                /* from{
                    transform: rotate(0deg);
                }
                to{
                    transform: rotate(360deg);
                } */
                0%{
                    transform: rotate(0deg);
                }
                25%{
                    background-color: red;
                }
                50%{
                    opacity: 0.6;
                }
                75%{
                    border-radius: 10px;
                    opacity: 0.4;
                }
                100%{
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div id="demo">动画</div>
    </body>
</html>

 

posted @ 2020-10-11 23:50  佳佳460  阅读(146)  评论(0)    收藏  举报