作者信息

长期闲置

长风破浪会有时,直挂云帆济沧海。

最近文章
ajax请求时post和get的区别是什么865
ajax默认是异步请求吗346
cors和ajax的区别是什么620
视频教程分类
推荐视频教程
  • php程序员小白到大牛三个月集训php程序员小白到大牛三个月集训
  • Laravel 9 学习正当时—保姆级教程,想学不会都难!Laravel 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • 首页 >web前端 >前端问答 > 正文

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

    原创2022-06-14 15:38:24744 关注公众号:每天精选资源文章推送

    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-name 指定要绑定到选择器的关键帧的名称

    • animation-duration 动画指定需要多少秒或毫秒完成

    • animation-timing-function 设置动画将如何完成一个周期

    • animation-delay 设置动画在启动前的延迟间隔。

    • animation-iteration-count 定义动画的播放次数。

    • animation-direction 指定是否应该轮流反向播放动画。

    • animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

    • animation-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中文网其它相关文章!

    20期PHP线上班

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:css
  • 推荐:PHP从基础到实战教程视频

    相关文章

    相关视频


    专题推荐