欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

动画

程序员文章站 2022-05-01 20:15:21
...
CSS常用属性

动画

定义动画:

(一)普通定义动画

 @keyframes 动画名字 {
           from{
               初始样式
           }
           to{
               改变后样式
           }
       }

(二)百分比定义动画

 @keyframes 动画名字 {
           百分比{改变后样式}
       }
       
   eg:@keyframes aa {
           0%{background-color: rgb(252, 47, 32)}
           25%{background-color: rgb(236, 138, 25)}
           50%{background-color: rgb(131, 245, 55)}
           75%{background-color: rgb(73, 236, 222)}
           100%{background-color: #b633f3}
       }

使用动画:

animation:动画名字 执行时间 执行次数(infinite)等

动画属性:

    1) animation-delay:3s;   开始时间
        animation-name:ly;  动画名字
        animation-duration:3s;  动画执行时间
       
    2) animation-timing-function:linear; 动画执行速度
            linear:匀速
            ease : 默认值,慢 到快 再到慢

    3) animation-fill-mode:forwards;动画结束后的样式
            none 默认值  动画前什么样,结束后就什么样    
            forwards 动画结束时,是什么样式,就是什么样式 

    4) animation-iteration-count:infinite; 规定动画执行次数
             值为: 数字 或者 infinite无限循环
    5) animation-direction:alternate;
            normol 正向旋转
            reverse 反向旋转
            alternate 奇数正向 偶数反向
            alternate-reverse 奇数反向 偶数正向
    5) animation-play-state:paused;     
             running  播放 默认值
             paused   暂停
相关标签: div