• 技术文章 >web前端 >css教程

    css animation-fill-mode属性怎么用

    (*-*)浩(*-*)浩2019-05-28 18:06:04原创1535
    animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。

    注释:其属性值是由逗号分隔的一个或多个填充模式关键词。

    语法

    animation-fill-mode : none | forwards | backwards | both;

    描述
    none
    不改变默认行为。
    forwards
    当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
    backwards
    在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
    both
    向前和向后填充模式都被应用。

    实例

    为 h1 元素规定填充模式:

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    animation-fill-mode: forwards;
    -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
    -o-animation:myfirst 5s; /* Opera */
    }
    
    @keyframes myfirst
    {
    from {background:red;}
    to {background:yellow;}
    }
    
    @-moz-keyframes myfirst /* Firefox */
    {
    from {background:red;}
    to {background:yellow;}

    以上就是css animation-fill-mode属性怎么用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:css word-wrap属性怎么用 下一篇:css background属性怎么用
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 怎么在html增加css• css max-height属性怎么用• css justify-content属性怎么用• css clear属性怎么用
    1/1

    PHP中文网