在样式里的div需要先写动画名如aa，animation：aa 10s(动画时长），infinite（无限循环） 1、@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果2、使用animation进行动画捆绑。两个值：动画名称、 ...
分类：
其他好文 时间：
2018-04-02 15:12:43
阅读次数：
176
过渡模块和动画模块的区别：过渡动画需要人为的去触发这个反应，而动画模块不需要人为相同点：都是动画；都是系统新增的属性；都是要满足三要素才有动画效果三要素：1.告诉系统执行哪个动画，要写出动画名称；animation-name:名称; 2.告诉系统我们需要创建一个名称的动画； @keyframes 名... ...
分类：
Web程序 时间：
2018-03-17 00:36:11
阅读次数：
274
最近在学习一份来自git的动画框架源码，看懂70%的核心代码后，打算自己动手实践一版，然鹅，所有框架搭起来以后，在动画这块却出了问题： 想设计一个slideInLeft的动画，必然想到了要从偏移-10%的位置，移动到0的位置，于是，乐呵呵的写上一笔代码： @keyframes fadeInLeft{ ...
分类：
Web程序 时间：
2018-03-13 15:36:53
阅读次数：
4313
从页面上放出来 @-webkit-keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; }} @keyframes fade ...
分类：
Web程序 时间：
2018-03-02 15:37:41
阅读次数：
248
1.对于animation和keyframes和transform开头的属性，最好还要写一种兼容的，就是加上webkit的前缀 2.backface-visibility 需要加webkit前缀，移动端backface-visibility 即使是跟随父元素翻转，也能有效。pc端跟随父元素的翻转是无 ...
分类：
移动开发 时间：
2018-02-24 19:28:26
阅读次数：
167
定义： 通过 @keyframes 规则，能够创建动画。 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中，可以多次改变这套 CSS 样式。 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画的开始时间，10 ...
分类：
Web程序 时间：
2018-02-24 13:05:37
阅读次数：
195
使用@keyframes name{}属性来实现自动的移动效果如下，可以使用infinite来实现无限循环播放。也可以规定循环次数，只需把infinite更换为想要播放的次数即可： ...
分类：
Web程序 时间：
2018-02-06 20:13:49
阅读次数：
197
用@keyframes（动画），实现页面加载时的div动画（不要用js控制，因为当页面加载的时候，js还不一定可以使用） 可以在https://daneden.github.io/animate.css/参考所需要的动画效果 ...
分类：
其他好文 时间：
2018-02-02 16:09:42
阅读次数：
298
.heart{ animation:heart 1s ease infinite; } @keyframes heart { 0% {opacity:0.1;} 100%{opacity:1;} } ...
分类：
Web程序 时间：
2018-01-02 23:31:45
阅读次数：
218
【前言】 通过CSS3，我们能够创建动画，可以在许多场合下替代动画图片、Flash动画和JS 【CSS3的@keyframes规则】 @keyframes规则用于创建动画，在@keyframes中规定某项CSS样式，就能创建由当前样式主键变化成新样式的动画效果。 【兼容性】 IE10、Firefox ...
分类：
Web程序 时间：
2017-11-29 18:11:08
阅读次数：
187
