zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    表单的重复提交问题
    js日期操作
    spring data jpa
    Excel Xll开发资料
    Excel DNA学习笔记一
    error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏的解决方案
    点进去勿喷
    hdu1305(字典树)
    2018 Multi-University Training Contest 3
    hihocoder 1014(字典树)
  • 原文地址:https://www.cnblogs.com/jia460/p/13800418.html
Copyright © 2011-2022 走看看