为什么要用css动画替换js动画 导致JavaScript效率低的两大原因：操作DOM和使用页面动画。 用CSS3动画替代JS模拟动画的好处： 不占用JS主线程； 可以利用硬件加速； 浏览器可对动画做优化（元素不可见时不动画减少对FPS影响） CSS3动画提供了2D和3D以及常规动画属性接口，它可以 ...
分类：
Web程序 时间：
2019-10-11 12:33:16
阅读次数：
116
CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率 ...
分类：
Web程序 时间：
2019-09-27 19:42:01
阅读次数：
130
Animation animation属性是以下属性的一个简写属性形式。 初始值 animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。 一个圆球的不同animation！ 原文：https://developer.mozilla.org/zh- ...
分类：
Web程序 时间：
2019-09-26 18:42:02
阅读次数：
133
0921自我总结 CSS3动画的使用 一.动画的创建 @keyframes规则是创建动画 浏览器兼容 根据状态的百分比来设置 上面如果有前缀下面使用的时候必须加上前缀 二.css3动画的属性 animation设置动画 :animation: name duration timing functio ...
分类：
Web程序 时间：
2019-09-21 17:22:39
阅读次数：
161
今天要分享一组代码，当鼠标悬停在按钮上时。按钮抖动！！！ 效果图（静态截图）： 想要看具体的动图，那就动手敲起来吧，效果图很可爱滴呦！！！ ...
分类：
Web程序 时间：
2019-09-06 01:38:35
阅读次数：
218
ease： 1、ease：（逐渐变慢）默认值 2、linear：（匀速） 3、ease-in：(加速) 4、ease-out：（减速） 5、ease-in-out：（加速然后减速） 6、cubic-bezier transition：all 1s ease 1s 代表的含义 执行变换的属性：tran ...
分类：
Web程序 时间：
2019-08-22 12:45:06
阅读次数：
86
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 ㈠@keyframes 规则 ⑴浏览器支持 Firefox 支持替代的 @-moz-keyframes 规则。 Opera 支持替代的 @-o-keyframes 规则。 Safari 和 ...
分类：
Web程序 时间：
2019-08-11 20:26:42
阅读次数：
120
### 首先最重要的两个 ++ animation css属性 至少有 : 2个值 animation : name 5s 简写 : myfirst 5s linear(ease) 2s infinite(33) alternate(normal) name duration timing-func ...
分类：
Web程序 时间：
2019-08-03 12:46:56
阅读次数：
127
CSS动画animation 可以让页面中指定的元素按照设定的方式“动”起来，运用的是人视觉延迟的原理，连续地在上一张图消失之前插入下一张 其中需要设置的属性值如下： 1.animation-name 对象的动画名称，以便后续设置动画属性时使用 默认为none，如果设置的话即为要设置动画的关键帧的名 ...
分类：
Web程序 时间：
2019-07-30 12:46:40
阅读次数：
101
一、transition 1、transition元素样式发生改变时，给元素添加一个过渡动画。 1.1、transition-delay 延迟时间，动画延迟多长时间执行(s|ms) 默认值0s 1.2、transition-duration 动画时长，动画用多长时间完成(s|ms) 默认值 0s 1 ...
分类：
Web程序 时间：
2019-07-22 13:12:45
阅读次数：
154
