• 技术文章 >web前端 >前端问答

    css3动画属性名是什么

    长期闲置长期闲置2022-01-24 11:30:27原创173

    在css3中,动画属性名是“animation”,该属性是一个简写属性,用于规定绑定的keyframe名称、动画时间、速度曲线、动画延迟、动画次数和是否反向播放动画,语法为“animation:名称 时间 速度 延迟 次数 是否反向播放”。

    本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

    css3动画属性名是什么

    animation 属性是一个简写属性,用于设置六个动画属性:

    注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

    语法为:

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

    其中参数表示的值为:

    11.png

    示例如下:

    <html>
    <head>
    <meta charset="utf-8"> 
    <title>123</title>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
    }
    @keyframes mymove
    {
    from {left:0px;}
    to {left:200px;}
    }
    @-webkit-keyframes mymove /*Safari and Chrome*/
    {
    from {left:0px;}
    to {left:200px;}
    }
    </style>
    </head>
    <body>
    <p><strong>注意: </strong> Internet Explorer 9 及更早IE版本不支持 animation 属性。</p>
    <div></div>
    </body>
    </html>

    输出结果:

    +3.gif

    (学习视频分享:css视频教程

    以上就是css3动画属性名是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:css3的三种使用方法是什么 下一篇:css3的注释标记是什么

    相关文章推荐

    • css怎么设置按钮中的字大小• 一个实例用css来实现胖橘的喜乐(实例分享)• 一文详解如何css实现动态弧形线条长短变化的Loading动画• html5和css3中怎样设置图片的翻转• 2022年6款实用的css工具,助你提升开发效率!

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网