写代码啦
CSS动画
回复数(1) 浏览数(20)
苦咖啡 06月28日 21:50 最后回复来自: 烟雨 前端
{{topic.upvote_count || 0}} 编辑 回复

个人觉得,这部分饥人谷的课程讲的不是很全面,可能是老师的习惯,对于小白来说,这节课程真正重要的两种过渡的属性都没有介绍,只是给了个简写,给了个查找路径,了解更多,自己去查

浏览器的渲染过程

  1. 根据HTML生成HTML树(DOM)
  2. 根据CSS生成CSS树(CSSOM)
  3. 将两棵树合并成一颗渲染树(render tree)
  4. Layout布局(文档流,盒模型,计算大小和布局)
  5. point绘制(把边框颜色,文字颜色,阴影画出来)
  6. composite 合成(根据层叠关系展示画面)
    ### 三种树模型
    DOM CSSOM RenderTree DOM CSSOM RenderTree

简单带一下JS,如何用JS来更新模式

div.style.background = "red"设置属性
div.style.display="block"设置属性
div.classList.add("red");添加节点
div.remove()直接删除节点

CSS 性能优化

css性能优化

把left改成transform
使用will-change或translate

JS优化

使用requestAnimationFrame代替setTimeOut

transform全解

transform中的几个属性
translate: 移动
rotate:旋转
scale:放大/缩小
skew:倾斜
如果用transform缩写:属性间用空格隔开

transition过渡

作用:补充中间帧
* transition-property:添加过渡效果的样式属性名称
transition:left
* transition-duration:过渡效果的耗时
transition:2s
* transition-timing-function:设置时间函数,控制运动速度
transition-timing-function :linear
* transition-delay:过渡效果的延时
transition-delay:2s
上述属性简写:transition:属性名称 过渡时间 时间函数 延迟
属性间用空格隔开
同时添加多个样式时,用逗号隔开
为所有样式添加过渡效果
transition:all 2s

animation过渡

创建动画
HTML
@keyframes xxx{
0%{
transform:translate(0,0);
}
50%{
transform:translate(200px,0);
}
100%{
transform:translate(200px,200px);
}
}

也可以用from表示0% 用to表示100%

animation的属性和transition差不多
* animation-duration:2s;
* animation-iteration-count:设置动画循环播放次数
* animation-direction:alternate来回播放
* animation-delay:2s;
* animation-fill-mode:设置动画结束时的状态
forwards保留动画结束时的状态,在有延迟时不会立即进入动画的初始状态
backwards:不会保留动画结束时的状态,再添加了动画延迟的前提下,如果动画有初始状态,先进入初始状态
both:保留动画结束状态,有延迟立即进入初始状态
* animation-timing-function:动画的时间函数
* animation-play-state:paused/running设置动画的播放状态
* animation的缩写:
animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名
顺序可以任意改变

用transform写的跳动的红心(jsbin)

http://js.jirengu.com/jisab/1/edit?html,css,output

用transition写的跳动的红心(jsbin)

http://js.jirengu.com/yelas/1/edit?html,css,output

用animation写的跳动的心(jsbin)

http://js.jirengu.com/feriv/1/edit?html,css,output

{{topic.upvote_count || 0}}

个人觉得,这部分饥人谷的课程讲的不是很全面,可能是老师的习惯,对于小白来说,这节课程真正重要的两种过渡的属性都没有介绍,只是给了个简写,给了个查找路径,了解更多,自己去查

浏览器的渲染过程

  1. 根据HTML生成HTML树(DOM)
  2. 根据CSS生成CSS树(CSSOM)
  3. 将两棵树合并成一颗渲染树(render tree)
  4. Layout布局(文档流,盒模型,计算大小和布局)
  5. point绘制(把边框颜色,文字颜色,阴影画出来)
  6. composite 合成(根据层叠关系展示画面)
    ### 三种树模型
    DOM CSSOM RenderTree DOM CSSOM RenderTree

简单带一下JS,如何用JS来更新模式

div.style.background = "red"设置属性
div.style.display="block"设置属性
div.classList.add("red");添加节点
div.remove()直接删除节点

CSS 性能优化

css性能优化

把left改成transform
使用will-change或translate

JS优化

使用requestAnimationFrame代替setTimeOut

transform全解

transform中的几个属性
translate: 移动
rotate:旋转
scale:放大/缩小
skew:倾斜
如果用transform缩写:属性间用空格隔开

transition过渡

作用:补充中间帧
* transition-property:添加过渡效果的样式属性名称
transition:left
* transition-duration:过渡效果的耗时
transition:2s
* transition-timing-function:设置时间函数,控制运动速度
transition-timing-function :linear
* transition-delay:过渡效果的延时
transition-delay:2s
上述属性简写:transition:属性名称 过渡时间 时间函数 延迟
属性间用空格隔开
同时添加多个样式时,用逗号隔开
为所有样式添加过渡效果
transition:all 2s

animation过渡

创建动画
HTML
@keyframes xxx{
0%{
transform:translate(0,0);
}
50%{
transform:translate(200px,0);
}
100%{
transform:translate(200px,200px);
}
}

也可以用from表示0% 用to表示100%

animation的属性和transition差不多
* animation-duration:2s;
* animation-iteration-count:设置动画循环播放次数
* animation-direction:alternate来回播放
* animation-delay:2s;
* animation-fill-mode:设置动画结束时的状态
forwards保留动画结束时的状态,在有延迟时不会立即进入动画的初始状态
backwards:不会保留动画结束时的状态,再添加了动画延迟的前提下,如果动画有初始状态,先进入初始状态
both:保留动画结束状态,有延迟立即进入初始状态
* animation-timing-function:动画的时间函数
* animation-play-state:paused/running设置动画的播放状态
* animation的缩写:
animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名
顺序可以任意改变

用transform写的跳动的红心(jsbin)

http://js.jirengu.com/jisab/1/edit?html,css,output

用transition写的跳动的红心(jsbin)

http://js.jirengu.com/yelas/1/edit?html,css,output

用animation写的跳动的心(jsbin)

http://js.jirengu.com/feriv/1/edit?html,css,output

20
回复 编辑