详解css3系列：动画@keyframes和Animation

codergarden 发布于2019-08-28 17:58 / 739人阅读

摘要：定义动画的名称。动画时长的百分比。在中，我们以百分比来规定改变发生的时间，或者通过关键词和，等价于和。其中，是动画的开始时间，动画的结束时间。规定完成动画所花费的时间，以秒或毫秒计。动画应该正常播放。

赞助我以写出更好的文章，give me a cup of coffee?

2017最新最全前端面试题

在css3中，我们可以通过@keyframes创建关键帧动画效果。我们需要将@keyframes绑定到选择器中，否则不会有效果出现。同时，我们还需定义动画时长和动画名称

语法

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。

在css3中，我们以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。其中，0% 是动画的开始时间，100% 动画的结束时间。

animation

另外一个重要的属性：animation

animation 属性是一个简写属性，用于设置六个动画属性：

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

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

duration（持续的时间）

语法：

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

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

animation-name属性主要是用来调用@keyframes定义好的动画。

注:animation-name调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。

语法

animation-direction: normal|alternate;

值	描述
normal	默认值。动画应该正常播放。
alternate	动画应该轮流反向播放。

animation-timing-function 值:

代码例子

    
 
 
     鼠标移动到我这里，查看动画效果

demo

点击下面的result查看demo：
http://jsfiddle.net/trigkit/0...

GPU云服务器云服务器 css3动画高性能css3动画 js原生动画详解 keyframes

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110920.html

css3动画属性详解之transform、transition、animation

摘要：动画属性详解关于制作动画的几个属性变形转换和动画。一属性旋转中心为原点扭曲倾斜缩放移动矩阵变形。各个属性的用法旋转其中表示度。承载动画的另一个属性。定义动画的名称。一个或多个合法的样式属性。 css3动画属性详解：关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)。一、transform 属性：旋转rotate（中...

Riddler 2019-08-30 12:46 评论0 收藏0
「CSS3 」动画详解

摘要：规定动画的名称。规定动画是否在下一周期逆向地播放。定义动画各个阶段的状态的代码段。动画的周期时间。动画的循环次数。动画完成后，元素保持动画最后的状态。重要提示请不要忘记推荐和收藏搜索动画详解 CSS3 提供给了我们非常多的转换函数： 2D: translate, rotate, scale, skew. 3D: translate3d, rotate3d, scale3d, skew...

weij 2019-08-28 18:16 评论0 收藏0
CSS3 新特性

摘要：语法说明对象选择器投影方式轴偏移量轴偏移量模糊半径阴影扩展半径阴影颜色内阴影，向右偏移，向下偏移，模糊半径，阴影缩小属性的参数设置取值阴影类型此参数可选。 CSS3 是最新的 CSS 标准，并且完全向后兼容，不过目前W3C 仍然在对 CSS3 规范进行开发，虽然标准的规范还没有正式发布，但是现代浏览器已经支持相当多的 CSS3 属性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...

justjavac 2019-08-29 13:07 评论0 收藏0
css3中的变形（transform）、过渡（transition）、动画（animation）属性

摘要：中制作动画的几个属性中的变形过渡动画。默认值为，为时，表示变化是瞬时的，看不到过渡效果。实现动画效果主要由两部分组成通过类似动画中的帧来声明一个动画在属性中调用关键帧声明的动画。 css3中制作动画的几个属性：css3中的变形（transform）、过渡（transition）、动画（animation）。一、 CSS3变形（transform）语法： transform ： no...

waruqi 2019-08-30 10:51 评论0 收藏0
CSS3 animation 基础

摘要：最近项目有需求要做一个的页面，涉及到的使用。中间的动画过程由浏览器渲染引擎进行渲染。其中可以使用的时间段或者通过关键词和，等价于和。动画以低速开始，然后加快，在结束前变慢。动画延迟进入动画动画匀速播放持续，播放一次后将停止在最终的状态最近项目有需求要做一个H5的页面，涉及到CSS3 animation的使用。这里做了一个项目中的总结。 animation 基本用法 animation...

rose 2019-08-30 13:11 评论0 收藏0