动画

Animation

@keyframes定义
animation: 使用

@keyframes mykf
{
    from { background: red; }
    to {background: yellow; }
}
div
{
    animation: mykf 5s infinite;
}

属性

The animation shorthand property applies an animation between styles.

animation-name 时间曲线
animation-duration 动画时长
animation-timing-function 动画的时间曲线
animation-delay 时间开始前的延迟
animation-iteration-count 动画的播放次数
animation-direction 动画的方向

@keyframes mykf
{
    0% { top: 0; transition:top ease }
    50% { top: 30; transition:top ease-in }
    75% { top: 10; transition:top ease-out }
    100% { top: 0; transition:top linear }
}

Transition

优点是可精细控制每个属性的变换

transition-property 要变换的属性
transition-duration 变换的时长
transition-timing-function 时间曲线
transition-delay 延迟

Timing fuction

css timing fuction 只有cubic-bezier 是以时间为横轴，被变换属性百分比为纵轴的函数曲线，有起始点、终点和两个控制点。

系统推荐特例曲线有一下几个

ease 位移类 (最常用推荐)
linear
ease-in 退出型
ease-out 进入型
ease-in-out

cubic-bezier曲线可以拟合

渲染与颜色

CMYK与RGB

HSL与HSV

形状

border
box-shadow
border-radius

data uri + svg 搞定一切矢量图做bg

css作业

body.getComputedStyle

HTML

quot
amp
lt
gt

语义

DOM API

整体分三类 Dom Tree、Events、Range
节点：文本节点元素节点

导航类操作

parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling

修改类操作

appendChild
insertBefore
removeChild
replaceChild

重点

1.所有的dom元素默认只有一个父元素，不能被插入到两个位置，如果需要把某元素从a位置换到b位置，不需要手动将其从a位置摘除，直接插入到b位置即可；
2.childNodes是living的collection，实时根据dom操作而变化；

高级操作

compareDocumentPosition: 是一个用于比较两个节点中关系的函数
contains:
isEqualNode:
isSameNode:
cloneNode:复制一个节点，如果传入参数true，则会连同子元素拷贝

事件

addEventListenner 三个参数type、listener、options

前端训练营第九周学习总结