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

    css3动画执行一次的复合写法是什么

    长期闲置长期闲置2022-06-14 15:38:24原创273

    css3中设置动画执行一次的复合写法是“animation:名称 时间 速度 延迟 1 是否反向播放”,其中“1”表示动画播放的次数,也即动画执行的次数;animation是一个简写属性,用于规定元素动画的动作关键帧名称、动画时间、速度曲线、动画延迟、动画次数以及是否反向播放动画。

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

    css3动画执行一次的复合写法是什么

    在css3中,动画属性名是“animation”,

    该属性是一个简写属性,用于规定绑定的keyframe名称、动画时间、速度曲线、动画延迟、动画次数和是否反向播放动画,

    语法为:

    animation: name duration timing-function delay iteration-count direction fill-mode play-state;

    动画只执行一次的复合写法只需将其中的animation-iteration-count值设置为1即可。

    示例如下:

    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 3s 1;
    /* Safari and Chrome */
    -webkit-animation:mymove 3s 1;
    }
    @keyframes mymove
    {
    from {top:0px;}
    to {top:200px;}
    }
    @-webkit-keyframes mymove /* Safari and Chrome */
    {
    from {top:0px;}
    to {top:200px;}
    }
    </style>
    </head>
    <body>
    <p><strong>注意:</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 animation-iteration-count 属性。</p>
    <div></div>
    </body>

    输出结果:

    29.gif

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

    以上就是css3动画执行一次的复合写法是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:css3边框怎么取消阴影 下一篇:css3怎么禁止表格选择高亮
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css3中倾斜的函数是什么• css3单位是什么• css3什么是自适应布局• css3中calc怎么设置除法• 用什么实现css3动画效果
    1/1

    PHP中文网