热线电话 0472-6868359
首页
关于视觉癖
设计服务
热门主题
投稿通道
设计师入驻
设计师招聘
在线留言
联系我们

热门主题

当前位置:视觉癖 > 热门主题 >

animation-iteration-count属性(CSS设置播放动画次数)

发布时间:2021-06-02 14:26 所属分类:热门主题 浏览次数:
  animation-iteration-count属性
  animation-iteration-count属性主要用来定义动画的播放次数。
  语法规则:
  animation-iteration-count:infinite|[,infinite|]*
  1、其值通常为整数,但也可以使用带有小数的数字,其默认值为1,这意味着动画将从开始到结束只播放一次。
  2、如果取值为infinite,动画将会无限次的播放。
  举例:
  通过animation-iteration-count属性让动画move只播放5次,代码设置为:
  animation-iteration-count:5;
  注意:Chrome或Safari浏览器,需要加入-webkit-前缀!
CSS
  CSS设置播放动画次数
  一、实现CSS3无限循环动画代码示例。
  代码如下:
  CSS:
  @-webkit-keyframesgogogo{
  0%{
  -webkit-transform:rotate(0deg);
  border:5pxsolidred;
  }
  50%{
  -webkit-transform:rotate(180deg);
  background:black;
  border:5pxsolidyellow;
  }
  100%{
  -webkit-transform:rotate(360deg);
  background:white;
  border:5pxsolidred;
  }
  }
  .loading{
  border:5pxsolidblack;
  border-radius:40px;
  width:28px;
  height:188px;
  -webkit-animation:gogogo2sinfinitelinear;
  margin:100px;
  }
  扩展材料
  实现动画无限循环所需求的CSS属性阐明:
  1、infinite
  在animation后面加上infinite就能够无限循环,另外还能够做反向循环使用animation-direction
  2、animation-name
  规则需求绑定到选择器的keyframe名称。
  3、animation-duration
  规则完成动画所花费的时刻,以秒或毫秒计。
  4、animation-timing-function
  规则动画的速度曲线。
  5、animation-delay
  规则在动画开端之前的推迟。
  6、animation-iteration-count
  规则动画应该播放的次数。
  7、animation-direction
  规则是否应该轮流反向播放动画。
作品标签: CSS

评论列表(共173人参与)参与讨论或分享设计作品获得视觉癖积分奖励

用户头像图片
    萌妹,求御注册会员
    2021-06-02 8:59:18

    框盒,即边框以内的区域。 ●padding-box:背景被裁剪到内边距框,即padding以内区域。 ●cont不论你是处理文字、图画、仍是图形元素,如果没有一个深思熟虑的排版构成,你的工作基本上就会崩溃。

    回复
用户头像图片
    visi注册会员
    2021-06-02 13:41:45

    > animation-iteration-count属 1、写给谁看: 。。。

      用户头像图片
        d属性 布注册会员
        2021-06-02 10:8:0

        @visi:animation-iterati吧! 一、标签界说及用法 在html中,标签也指的是掩盖,它是运~~~

    回复
用户头像图片
    e 明黄绿色游客
    2021-06-02 9:19:29

    游客42739:animation-itera> NuanceCoral光韵珊瑚红 CoralReefs珊瑚礁 FusionCoral珊瑚粉,珊瑚色,橙色调的珊瑚粉 /div> 别的一个常见的错误是标题周围不正确的margin值。标题其实是与它下面的阶段是相关联的,而不仅仅是两个阶段的切割符。这就是为什

    回复
用户头像图片
    othe注册会员
    2021-06-02 17:35:20

    结束只播放一次。 2、如果取值为infinite,动画将会无限次的小四号黑体(不加粗),靠左对齐,首行缩进2个字符;二级标题前空一行,二级标题后不空行;三级标题前后均不空行。一切正文均选用小四号宋体,靠左对齐,首行缩进2个字符

    回复