13动画样式详解

最新推荐文章于 2024-09-06 18:18:08 发布

qq_46230474

最新推荐文章于 2024-09-06 18:18:08 发布

阅读量190

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_46230474/article/details/104498683

版权

动画样式详解

1、触发式动画

transition-duration: 1s（;动画执行的时长 1s=1000ms）

transition-delay:2s（延迟动画执行）

过渡动画时间参数

：默认值ease 慢-快-慢

慢速开始 ease-in

慢速结束 ease-out

慢速开始和结束 ease-in-out

匀速 linear

贝塞尔曲线 https://cubic-bezier.com/#.17,.67,.83,.67%20;

transition-timing-function:cubic-bezier(0,1.59,.9,-0.43) ;

transition-timing-function:linear ;

过渡动画属性 transition-property

transition-property: none; 没有动画效果

property :参与动画的属性名。多个属性用逗号隔开transition-property:width, height ;

all 所有动画参与，默认值

  <style>
        div{
            width: 300px;
            height: 200px;
            background-color: palevioletred;
            让鼠标变成一个小手
            cursor: pointer;
            /* 动画执行的时长 1s=1000ms */
            transition-duration: 1s;
            /* 延迟动画执行 */
            /* transition-delay:2s; */
            /* 过渡动画时间参数
            ：默认值ease 慢-快-慢   transition-timing-function:cubic-bezier(0.25,1.0.1,0.25,0.1) ;
        
            慢速开始 ease-in
            慢速结束 ease-out
            慢速开始和结束 ease-in-out   transition-timing-function:cubic-bezier(0.42,0,0,0.58，1) ;
        
            匀速 linear */
            /* 贝塞尔曲线 https://cubic-bezier.com/#.17,.67,.83,.67%20; */
            transition-timing-function:cubic-bezier(0,1.59,.9,-0.43) ;

            /* 复合写法 
            transition：property duration timing-function delay
            过渡动画  属性名 动画时长 时间函数 延迟时间
            */

                /* 过渡动画属性
                transition-property: none; 没有动画效果
                property :参与动画的属性名。多个属性用逗号隔开transition-property:width, height ;
                all 所有动画参与， 默认值
                 */
            transition-property:all ;
        }
        div:hover{
            /* background-color: purple; */
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

主动式动画

@keyframes animationname (动画名称)

animation-name和动画绑定，或者说通过animationname激活

animation-name: two;

动画时长

animation-duration: 3s;

/动画次数

animation-iteration-count: infinite; 动画循环播放

animation-iteration-count: infinite;

时间函数 cubic-bezier(1, 0, 0, 1)

animation-timing-function: cubic-bezier(1, 0, 0, 1);

动画延迟 animation-delay: 2s;

动画是否正反向切换执行 animation-direction： normal

默认值 normal 正常执行

alternate 正反向切换执行

reverse 反向执行

alternate-reverse 反正向切换执行

复合写法

animation-name: duration timing-function delay iteration-count direction;

动画：名称时长时间函数延迟次数方向

动画停止时状态是什么时刻的状态 animation-fill-mode: ;

backward 保留第一帧

forwards 保留最后一帧

both 自适应

播放/暂停 paused/ running

animation-play-state: paused;

  <style>
        div{
            width: 300px;
            height: 300px;
            background-color: greenyellow;
            cursor: pointer;
            /* 1、animation-name和动画绑定，或者说通过animationname激活 */
            animation-name: two;
            /*/2、动画时长 */
            animation-duration: 3s;
            /*3、动画次数 */
            /* animation-iteration-count: infinite; 动画循环播放 */
            animation-iteration-count: 2;
            /*4、 时间函数  cubic-bezier(1, 0, 0, 1)*/
            /* animation-timing-function: cubic-bezier(1, 0, 0, 1); */
            /* 5、 动画延迟   animation-delay: 2s;*/
            animation-delay: 2s;
            /* 6/ 动画是否正反向切换执行  animation-direction： normal
            默认值 normal 正常执行
           alternate 正反向切换执行
            reverse 反向执行
            alternate-reverse  反正向切换执行
            */
            animation-direction:;

            /* 复合写法 */
            /* animation-name:  duration timing-function delay iteration-count direction; */
            /* 动画：名称 时长 时间函数 延迟 次数 方向 */

            /* 动画停止时状态是什么时刻的状态   animation-fill-mode: ;*/
            /* backward 保留第一帧 */
            /* forwards  保留最后一帧 */
            /* both 自适应 */
            animation-fill-mode:forwards ;
        }
        /* @keyframes animationname (动画名称) */
        @keyframes two{
           0% {
                width: 500px;
                height: 100px;
            }
            50%{
                background-color: hotpink;
            }
            100%{
                 width: 300px;
                 height: 300px;
                 background-color: greenyellow;
            }
        }
        div:hover{
            /* 播放/暂停   paused/ running*/
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>