-
动画的优化
查看全部 -
let $content =document.querySelector('.content'); let initNumber = 0;for(let i = 0;i< 30; ++i) { let lefts = (Math.floor(Math.random()*5+12)); let delay = (Math.floor(Math.random() * 50 + 2)); initNumber += lefts; let ele = document.createElement('div'); ele.className = 'yudi'; ele.setAttribute("style",`left:${initNumber}%; top: ${lefts}%; animation-delay: ${delay/10}s`); console.log(ele);$content.append(ele); } 没有使用jquery,原生实现的红包雨查看全部 -
动画属性：
transition 真
animation 真
transform 假
①CSS3动画包括transition和animation
②动画常常和transform属性常用
③注意，transform并不是动画属性，但是它在为我们动画的实现做出了杰出的贡献
2、动画属性
①transition是动画属性，主要负责过渡属性的变化
查看全部 -
animation基础和写法
①动画名称（name）--@keyframes，与transition不同的是，animation需要自定义一个名称②过渡时间（duration）延迟时间（delay）③时间函数（timing-function）④播放次数（iteration-count）⑤播放方向（direction），即是否轮流播放和反向播放⑥停止播放的状态（fill-mode），⑦是否暂停（play-state）
⑤的属性值：alternate：先正向后反向；reverse：反向播放
⑥的属性值：forwards：以最后的状态结束。（不可和infinite一起用）
⑦的属性值：running：无限播放；paused：停止播放。该属性要跟js结合
animation可以解决transition display：none bug
查看全部 -
贝塞尔函数的四个值可以理解为两个控制点p1、p2的坐标。p0和p3的坐标已经确定了
查看全部 -
transition有四个要素：①属性名称（property）②过渡时间（duration）③延迟时间（delay）④时间函数（timing-function）
写的顺序：①②④③
注意：属性名称是css已有的属性的名称，不是自定义的。比如transform、opacity
代码：
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="transition.css"> </head> <body> <div class="box demo-1"> </div> </body> </html>
/*transition.css*/ .box{ width: 100px; height: 100px; background: #000; } .demo-1{ transition: transform 2s linear; } .demo-1:hover{ transform: rotate(45deg); }tips：1.display不能和transition一起使用。原因：transition是需要初始值的。而display:none时，它脱离了文档流的，transition读不到初始值。display:block时，虽然显示出来了，但是transition读的是瞬时值，依旧是空。所以display不要和transition一起使用
2.transition后面尽量不要跟all。原因：会造成大量的计算资源，会将宽高等等的属性全看一遍，增加GPU的损耗，导致页面卡顿
再举一个栗子：利用属性名为opacity实现渐入溅出效果http://www.zhangxinxu.com/study/201011/css3-transition-animate-demo-8.html
查看全部 -
dispiay不能和transition 一起使用
transition 后面不要跟all all会导致浏览器大量资源 导致画面卡顿
查看全部 -
1、animation基础和写法（一）
①动画名称（name）--@keyframes
②过度时间（duration） 延迟时间（delay）
③时间函数（timing-function）
2、animation基础和写法（二）
①播放次数（iteration-count）
②播放方向（direction）即是否轮流播放和反向播放
③停止播放的状态（fill-mode） 是否暂停（play-state）
3、animation简单运用
①animation适用场景
②animation解决transition display：none bug
③animation 跳动的元素
查看全部 -
1、transition基础和写法
①属性名称（property）
②过度时间（duration） 延迟时间（delay）
③时间函数（timing-function）
2、注意：
①display不能和transition一起使用
②transition后面尽量不要跟all
③常见闪动可以persp和backface-visibility
查看全部 -
1、学习CSS3动画必备基础
①CSS3新属性和其他CSS3静态属性
②Chrome浏览器调试工具
③js基础的API，例如属性选择、事件监听
查看全部 -
1、初学CSS3动画
①CSS3动画包括transition和animation
②动画常常和transform属性常用
③注意，transform并不是动画属性，但是它在为我们动画的实现做出了杰出的贡献
2、动画属性
①transition是动画属性，主要负责过渡属性的变化
②animation是动画属性，他可以实现transition做不到的事情，animation可以直接加载动画，transition需要一个触发，需要js协助
③transform不是动画属性，它是一个静态类，经常和动画类属性搭配
3、CSS3动画的发展（效果）兼容性
IE 10 2012-09-04
Chrome 4 2010-1-25 -webkit
FireFox 5 2011-1-25
4、CSS3动画的发展（事件）兼容性
IE 10 2013-10-17
Chrome 4 2010-1-25
FireFox 5 2011-1-25
5、CSS3动画的应用
①CSS3动画做一些功能性的菜单按钮
②宣传用的轮播图，各种页面的效果的缓冲
③页面间的切换过渡，网页小游戏
查看全部 -
1、学习CSS3动画的意义
①开发周期短
②增加浏览页面的趣味性
③增加用户视觉冲击力
2、什么是动画
①动画片、漫画、视频、flash等等会动的画面都是动画
②颜色高度等属性的变化（过渡）也是动画
③CSS3对于动画的实现有过度和帧动画
查看全部 -
好的查看全部
-
document.styleSheets 获取样式表
style.insertRule 往样式表里面注入规则
查看全部 -
transition和animation为动画属性
查看全部
举报