CSS3动画的常见属性（CSS3）

浅浅的花香味﹌ 2023-10-03 13:39 40阅读 0赞

## CSS3动画的常见属性（CSS3） ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS3动画的常见属性</title>
        <style>
            @keyframes move {
        
                0% {
        
                    transform: translate(0, 0);
                }
    
                100% {
        
                    transform: translate(1000px, 0);
                }
            }
    
            div {
        
                width: 100px;
                height: 100px;
                background-color: skyblue;
                /* 动画名称 */
                /*   animation-name: move; */
    
                /* 持续时间 */
                /*  animation-duration: 2s; */
    
                /* 运动曲线 */
                /*  animation-timing-function: ease; */
    
                /* 何时开始 */
                /*  animation-delay: 0.5s; */
    
                /* 重复次数 iteration 重复的    count 次数    infinite 无限 */
                /*   animation-iteration-count: infinite; */
    
                /*    是否反方向播放   默认的是 normal  如果想要反方向 则 alternate*/
                /*   animation-direction: alternate; */
    
                /* 动画结束后的状态 默认的是backwa回到起始状态 我们可以让它停留在结束状态forwards */
                /* animation-fill-mode: forwards; */
    
                /*  animation: name duration timing-function delay iteration-count direction fill-mode; */
                animation: move 2s linear 0s infinite alternate forwards;
                /*  linear是匀速的意思 */
            }
    
            div:hover {
        
                /*  鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */
                animation-play-state: paused;
            }
        </style>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>