ANIMATION动画的学习小总结

 动画他的原理就是逐帧动画，把整个运动的过程分为100份，在这一百份里实现自己想要的画面。

基本的参数:
1.animation-name（设置一个动画的名字这个名字可以是自定义的）
2.animation-duration（动画的持续时间有两个单位 s秒>ms毫秒）
3.animation-delay (动画的延迟时间也可以是负数当为负数时会抵消 animation-duration的时间)
4**.animation-iteration-count**（动画的重复次数，默认的就是1无限次是infinite）
5**.animation-timing-function**（动画的运动形式比较常用的ease（默认）linear匀速）
6.animation-fill-mode（规定动画播放之前或者之后动画是不是可见）none（默认值）backwards（在延迟的情况下让0%在延迟前生效）forwards（在运动结束后停到结束为位置）both（backwards.forwards同时生效）
7.animation-direction（定义是否应该轮流反向播放动画）
alternate（一次正一次反向），reverse（永远都反向）normal*（默认）。
@keyframes 动画的名字 { from{}
to{}
}（from起点位置等价于0% to终点位置等价于100%。默认情况下元素运动完会回到起始点位置）
也可以写成复合样式例如animation:4s（动画的时间） 2s（动画的延迟时间） linear（动画的运动状态）name（动画的名字）infinite（次数）forwards（运动后停到结束位置);

做一个小演示:

先做一个大盒子在做一个包含在盒子里的红方块，然后设置一个动画效果让红方块在盒子里上下左右移动。

ANIMATION动画的学习小总结相关推荐

web前端学习（十三）animation动画
动画由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性. Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时 ...
Android学习小Demo（9）一个To Do List的实现
记得看过一篇文章,是说一个人临走之前,列下了想做的最后100件事情,然后拿着这张便签,一件一件地去实现.又想起乔布斯说,如果今天是你的最后一天,你会怎么过? 我有很多事情想做,想写很多的文章,但是时间 ...
超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解本文摘自超级强大的SVG SMIL animation动画详解_Zoomla!逐浪CMS官网 (z01.com),网站看上去有年头了,担心哪天会 ...
[转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究. 本文地址:http://www.zhangxinxu.com/word ...
SVG SMIL animation动画详解----转载
一.SVG SMIL animation概览 1. SMIL是什么? SMIL不是指「水蜜梨」,而是Synchronized Multimedia Integration Language(同步多媒体 ...
CSS3 Animation动画的十二原则
[本文系外部转贴,原文地址:https://cssanimation.rocks/principles/] 编者注:鉴于KM不能插入iframe直接演示效果,只能给链接跳转页面看代码了:(Animat ...
jQuery源码解析（5）—— Animation动画
闲话 jQuery的动画机制有800行, 虽然不如样式的1300行,难度上却是不减.由于事前不了解animate接口的细节使用规则,看代码期间吃了很多苦头,尤其是深恶痛绝的defaultPrefilt ...
Android学习小Demo（10）ToDoList的改进版之ViewPager显示多个图片
在TodoList增强版的增加界面上,为了显示图片,我是挖了两块地方,放了两个ImageButton,来显示图片,而且限制了最多只能放两张图片.当两个View都放置图片之后,我就会把"Gal ...
Android animation动画
关于动画的实现,Android提供了Animation,在Android SDK介绍了2种Animation模式: 1. Tween Animation:通过对场景里的对象不断做图像变换(平移.缩放. ...

ANIMATION动画的学习小总结

ANIMATION动画的学习小总结相关推荐

最新文章

热门文章