有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

css3动画animation

代码编程 cat 11个月前 (11-03) 76次浏览 已收录 0个评论 扫描二维码

animation-name:move; 调用动画:

           /* 2.调用动画 */
            animation-name:move;
            animation-duration: 1s;
            /* animation-delay: 2s; */
            /* animation-timing-function: ease-in; */

            /* 动画执行的次数 */
            /* animation-iteration-count: 3; */
            animation-iteration-count: infinite;

            /* 反转反向 */
            /* animation-direction: normal; */
            /* animation-direction: reverse; */
            /* 正向反向交替进行 */
            /* animation-direction: alternate; */
            /* 反向正向交替进行 */
            /* animation-direction: alternate-reverse; */
            animation-play-state:paused;

@keyframes 创建动画:

第一种方式:from & to

        @keyframes move {  
            /* 动画的初始状态 */
            from{
                left:0px;
                top:0;
            }
            to{
                left:300px;
                top:0;
            }
        }

第二种方式:百分比

@keyframes move {  
            /* 与群组选择器一致 */
            0%,100%{
                left:0;
                top:0;
            }
            25%{
                left:300px;
                top:0;
            }
           
            50%{
                top:300px;
                left:300px;
            }
           
            75%{
                left:0;
                top:300px;
            }
        }

animation-name-指定动画名称:

默认 none 规定无动画效果

@keyframes定义动画名称

animation-duratio-定义动画持续的时间:

单位:以秒或毫秒计

默认值为0,需要设置该属性,否则不会播放动画

animation-timing-function-定义动画的时间函数:

linear 匀速

ease 缓动[默认值]。动画以低速开始,然后加快,在结束前变慢。

ease-in 加速——动画以低速开始。

ease-out 减速——动画以低速结束。

ease-in-out 先加速后减速——动画以低速开始和结束。

animation-delay-定义动画开始前等待的时间:

以秒或毫秒计。

默认值是 0

允许负值,(-2s 使动画马上开始,但跳过 2 秒进入动画)

.box {
    animation-name:move; 
    animation-duration: 5s; 
    animation-timing-function: ease-in; 
    animation-delay: -1s; 
    animation-iteration-count: infinite; 
}

animation-iteration-count-定义动画播放次数:

1【默认值】表示1次

数值 定义动画播放次数

infifinite 规定动画应该无限次播放。

animation-iteration-count: infinite;

animation-direction-定义动画运动的方向:

normal:正常方向

reverse:反方向运行

alternate:正向反向交替—》动画先正常运行再反方向运行,并持续交替运行

alternate-reverse:反向正向交替——》 动画先反运行再正方向运行,并持续交替运行

animation-play-state-动画的执行状态:

running:运动【默认】

paused: 暂停

animation-fifill-mode-设置动画在运动时间之外的状态:

none 默认值

进场之前和动画结束之后都停留在元素的初始状态

forwards 动画结束之后停留在结束帧状态

backwards 动画进场之前停留在初始帧状态

both 以上两者

animation-简写:

语法:

animation: 
动画名字 动画持续时间 动画时间函数 动画延迟时间 动画执行次数 动画的方向 动画的播放状态 填充模式 
默认值:none 0 ease 0 1 normal running none

空格隔开

靠前的时间表示持续时间,靠后时间为延迟时间

多组值

以上每一个属性都允许多组值,【逗号】隔开

简写多组值:【逗号】隔开

.box {
    width:100px; 
    height:100px; 
    background-color: red; 
    position:absolute; 
    left:0;
    top:0;
    /* animation-name:move,changebg; 
    animation-duration: 1s,3s; 
    animation-timing-function: ease-in,linear; */
    animation:move 1s ease-in,changebg 3s linear;
}
/*声明动画*/
@keyframes move { 
    0%,100%{ 
        left:0; 
        top:0; 
    }
    25%{
        left:300px; 
        top:0; 
    }
    50%{
        left:300px; 
        top:300px; 
    }
    75%{
        left:0; 
        top:300px; 
    } 
}
@keyframes changebg { 
    0%{ 
        background-color: red; 
    }
    100%{ 
        background-color: green; 
    } 
}
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址