CSS3中设置动画播放时间

animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒

语法规则

animation-duration: [,]*
取值为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。

案例演示：

制作一个矩形变成圆形的动画，整个动画播放时间持续了10s钟。

HTML:

<div>Hover Me</div>

CSS:

@keyframes toradius{from {border-radius: 0;}to {border-radius: 100%;}
}
div {width: 200px;height: 200px;line-height: 200px;text-align: center;color: #fff;background: green;margin: 20px auto;
}
div:hover {animation-name: toradius;animation-duration: 10s;animation-timing-function: ease-in-out;animation-delay: .1s;
}

CSS3中设置动画播放时间相关推荐

CSS3中设置动画开始播放的时间
animation-delay属性用来定义动画开始播放的时间,用来触发动画播放的时间点.和transition-delay属性一样,用于定义在浏览器开始执行动画之前等待的时间. 语法规则: anima ...
Unity Animation设置动画播放初始时间
Unity Animation设置动画播放初始时间需求在需要播放动作时, 从动作序列帧指定位置开始播放实现在指定位置等待播放 public Animation animation; void ...
css3中的动画学习分享
大家好,这里是demo软件园,今天为大家分享的是css3中的动画(animation). css3动画: 使元素从一种样式逐渐变化为另一种样式的效果. 动画原理:通过把人物的表情.动作.变化等分解后画 ...
css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程以下讨论的是和css3 动画属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
PPT2010中设置音乐播放停止位置
1.下面这则演示文稿中我已经在首页插入了一段音乐,我想让它在播放完第三页的时候停止.切换到[动画]选项卡,单击[高级动画]选项组中的[动画窗格]. 2.在右侧弹出的[动画窗格]面板中,选中你要设置的音 ...
C#发布网站在web.config和IIS中设置Session过期时间
C#发布网站在web.config和IIS中设置Session过期时间 web.config <system.web> <sessionState mode="InProc ...
html中如何设置动画效果,css3如何设置动画？
首先我们来了解一下css3实现简单动画需要用到的属性:animation属性,@keyframes"规则". animation属性和@keyframes"规则" ...
css动画定义,CSS3中Animation动画的定义和调用
现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到.接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyf ...
CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

CSS3中设置动画播放时间

CSS3中设置动画播放时间相关推荐

最新文章

热门文章