动画学习笔记

css选择器

// 阮一峰详细介绍 http://www.ruanyifeng.com/blog/2009/03/css_selectors.html

div, p 同时匹配
div div 匹配后代
div > p 匹配子元素
div + div 匹配同级的下一个元素(仅匹配一个)

其中 div p 与 div > p的区别
前者匹配全部的后代元素，而后者仅匹配向下一层（子元素）

CSS 3 中的新特性

// 应该利用 CSS 3 generator生成CSS3代码(上课会讲)
border-radius 边框倒角
box text shadow 盒子阴影
transform 2D 变形
Multi Column 将文本分隔成多列
transition 动画 //transition 1s height, 2s 1s width ease

transition-property: initial;  // 指那个程序需要动画
transition-duration: 1s;    // 动画用1s完成
transition-timing-function: initial;    //ease呼出
transition-delay: initial;   // 延迟多久做这动画

keyframes 动画和生成器
https://daneden.github.io/animate.css/
http://cssanimate.com/

http://www.css3generator.in/
http://css3.me/
https://www.tutorialspoint.com/css/css3_boarder_image.htm

CSS3 动画

主要用到了 3 个属性
transform 的全部函数
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
transition 可动画列表
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

animation //做动画效果
animation-name: initial;
animation-duration: initial; //动画用 ‘X’ s完成
animation-timing-function: initial; // lenear有多个属性和效果，例：linear线性
animation-delay: initial;
animation-iteration-count: 1; //动画次数 无限次是infinite
animation-direction: initial;
animation-fill-mode: initial;
animation-play-state: initial; // paused 和 running 可看html套路